From 44ca5b0aa42d51c611b435088ea4c0473a9e1a43 Mon Sep 17 00:00:00 2001
From: OpenClaw Sub-agent <ai-bot@openclaw.local>
Date: Mon, 3 Aug 2026 18:25:54 +1000
Subject: [PATCH] =?UTF-8?q?fix:=20tag=20detail=20mobile=20=E2=80=94=20tabs?=
 =?UTF-8?q?=20no=20longer=20wrap=20to=20a=20lonely=20second=20row?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- seg-tabs: single-row horizontal scroll (scrollbar hidden) as fallback,
  mobile-tuned padding/font/badge so all 4 tabs fit on 390px without clipping
- soft Delete button shadow (was visually louder than every other control)
- empty states: icon + centered text instead of the 'box-in-box' dashed frame
---
 links/templates/links/tag_detail.html | 48 +++++++++++++++++++++------
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/links/templates/links/tag_detail.html b/links/templates/links/tag_detail.html
index 7c1b744..96f82c5 100644
--- a/links/templates/links/tag_detail.html
+++ b/links/templates/links/tag_detail.html
@@ -44,18 +44,20 @@
   }
   .apple-btn-secondary { background: #fff; color: var(--apple-text); border: 1px solid rgba(0, 0, 0, 0.12); }
   .apple-btn-secondary:hover { background: #f0f0f3; }
-  .apple-btn-danger { background: var(--apple-red); color: #fff; box-shadow: 0 8px 22px rgba(255, 59, 48, 0.3); }
+  .apple-btn-danger { background: var(--apple-red); color: #fff; box-shadow: 0 4px 14px rgba(255, 59, 48, 0.18); }
   .apple-btn-danger:hover { background: #ff5147; }
   .apple-btn:active { transform: scale(0.96); }
 
   /* ── Segmented tabs ── */
   .seg-tabs {
-    display: inline-flex; padding: 3px; gap: 2px;
-    background: rgba(0, 0, 0, 0.055); border-radius: 12px;
-    margin-bottom: 1.4rem; flex-wrap: wrap;
+    display: flex; align-items: center; gap: 2px;
+    padding: 3px; background: rgba(0, 0, 0, 0.055); border-radius: 12px;
+    margin-bottom: 1.4rem;
+    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
   }
+  .seg-tabs::-webkit-scrollbar { display: none; }
   .seg-tab {
-    display: inline-flex; align-items: center; gap: 0.4rem;
+    display: inline-flex; align-items: center; gap: 0.4rem; flex: none; white-space: nowrap;
     padding: 0.45rem 0.95rem; border-radius: 9px; border: none; cursor: pointer;
     background: transparent; font-size: 0.82rem; font-weight: 600; color: var(--apple-text);
     transition: background 0.2s ease, box-shadow 0.2s ease;
@@ -89,14 +91,18 @@
   .res-card .res-meta { font-size: 0.72rem; color: var(--apple-gray); display: flex; align-items: center; gap: 0.3rem; }
   .res-card .res-meta svg { width: 0.85rem; height: 0.85rem; flex: none; }
   .res-empty {
-    padding: 2.5rem 1rem; text-align: center; color: var(--apple-gray); font-size: 0.9rem;
-    background: #fff; border: 1px dashed rgba(0, 0, 0, 0.12); border-radius: 16px;
+    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
+    padding: 2.2rem 1rem; text-align: center; color: var(--apple-gray); font-size: 0.88rem;
+    background: rgba(0, 0, 0, 0.022); border-radius: 14px;
   }
+  .res-empty svg { width: 1.9rem; height: 1.9rem; color: rgba(0, 0, 0, 0.18); }
 
   @media (max-width: 640px) {
     .tags-page { padding: 1.35rem 1rem 2.5rem; }
     .tag-header h1 { font-size: 1.6rem; }
     .res-grid { grid-template-columns: 1fr; }
+    .seg-tab { padding: 0.38rem 0.45rem; font-size: 0.76rem; gap: 0.3rem; }
+    .seg-tab .tab-count { min-width: 1.1rem; height: 1rem; padding: 0 0.28rem; font-size: 0.62rem; }
   }
 </style>
 
@@ -166,7 +172,12 @@
             {% endfor %}
         </div>
         {% else %}
-        <div class="res-empty">{% trans "No links found with this tag." %}</div>
+        <div class="res-empty">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"/>
+            </svg>
+            {% trans "No links found with this tag." %}
+        </div>
         {% endif %}
     </div>
 
@@ -189,7 +200,12 @@
             {% endfor %}
         </div>
         {% else %}
-        <div class="res-empty">{% trans "No posts found with this tag." %}</div>
+        <div class="res-empty">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/>
+            </svg>
+            {% trans "No posts found with this tag." %}
+        </div>
         {% endif %}
     </div>
 
@@ -212,7 +228,12 @@
             {% endfor %}
         </div>
         {% else %}
-        <div class="res-empty">{% trans "No pages found with this tag." %}</div>
+        <div class="res-empty">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"/>
+            </svg>
+            {% trans "No pages found with this tag." %}
+        </div>
         {% endif %}
     </div>
 
@@ -235,7 +256,12 @@
             {% endfor %}
         </div>
         {% else %}
-        <div class="res-empty">{% trans "No image collections found with this tag." %}</div>
+        <div class="res-empty">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A1.5 1.5 0 0021.75 19.5V4.5A1.5 1.5 0 0020.25 3H3.75A1.5 1.5 0 002.25 4.5v15A1.5 1.5 0 003.75 21z"/>
+            </svg>
+            {% trans "No image collections found with this tag." %}
+        </div>
         {% endif %}
     </div>
 </div>