From 4ea3134ba322f9444c3cedd1bbea7c88054c4c73 Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Thu, 19 Mar 2026 02:36:40 +0800
Subject: [PATCH] fix: move group tag into category cell and hide on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Relocate group tag from expand row to category column so it appears inline beside the category tag
- Add margin between stacked tags with .col-cat .tag + .tag spacing rule
- Remove fixed width from .col-cat; narrow .col-name from 35% to 30% to give category column room
- Hide .tag-group on screens ≤900px and widen .col-name to 50% to reclaim space

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/static/style.css     |  9 +++++++--
 website/templates/index.html | 10 ++++------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/website/static/style.css b/website/static/style.css
index 709fdcb2..13f9f0bf 100644
--- a/website/static/style.css
+++ b/website/static/style.css
@@ -268,7 +268,7 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
 }
 
 .col-name {
-  width: 35%;
+  width: 30%;
   overflow-wrap: anywhere;
 }
 
@@ -439,10 +439,13 @@ th[data-sort].sort-asc::after {
 }
 
 .col-cat {
-  width: 13%;
   white-space: nowrap;
 }
 
+.col-cat .tag + .tag {
+  margin-left: 0.35rem;
+}
+
 /* === Last Commit Column === */
 .col-commit {
   width: 9rem;
@@ -528,6 +531,8 @@ th[data-sort].sort-asc::after {
 /* === Responsive === */
 @media (max-width: 900px) {
   .col-commit { display: none; }
+  .tag-group { display: none; }
+  .col-name { width: 50%; }
 }
 
 @media (max-width: 640px) {
diff --git a/website/templates/index.html b/website/templates/index.html
index 4a91ecb0..8569016a 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -119,12 +119,15 @@
           <button class="tag" data-type="cat" data-value="{{ entry.category }}">
             {{ entry.category }}
           </button>
+          <button class="tag tag-group" data-type="group" data-value="{{ entry.group }}">
+            {{ entry.group }}
+          </button>
         </td>
         <td class="col-arrow"><span class="arrow">&rarr;</span></td>
       </tr>
       <tr class="expand-row" id="expand-{{ loop.index }}">
         <td></td>
-        <td colspan="3">
+        <td colspan="4">
           <div class="expand-content">
             {% if entry.description %}
             <div class="expand-desc">{{ entry.description | safe }}</div>
@@ -153,11 +156,6 @@
             </div>
           </div>
         </td>
-        <td class="col-cat">
-          <button class="tag" data-type="group" data-value="{{ entry.group }}">
-            {{ entry.group }}
-          </button>
-        </td>
         <td></td>
       </tr>
       {% endfor %}