From e967722a5d14aea5501d85cf9d99c9ad81b82920 Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Thu, 19 Mar 2026 02:24:23 +0800
Subject: [PATCH] fix: improve mobile table layout with auto sizing and tighter
 spacing

Switch table-layout back to auto on mobile to let columns size naturally,
add uniform cell padding overrides, shrink num/arrow columns further,
pin stars column width, reduce edge padding, and left-align the number
column to avoid awkward right-aligned single digits.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/static/style.css | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/website/static/style.css b/website/static/style.css
index 33bb382d..709fdcb2 100644
--- a/website/static/style.css
+++ b/website/static/style.css
@@ -264,7 +264,7 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
   width: 3rem;
   color: var(--text-muted);
   font-variant-numeric: tabular-nums;
-  text-align: right;
+  text-align: left;
 }
 
 .col-name {
@@ -534,18 +534,30 @@ th[data-sort].sort-asc::after {
   .hero { padding: 2rem 1.25rem 1rem; }
   .controls { padding: 0 1.25rem 0.75rem; }
 
-  .table { table-layout: fixed; }
+  .table { table-layout: auto; }
+
+  .table thead th,
+  .table tbody td {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
 
   .table thead th:first-child,
-  .table tbody td:first-child { padding-left: 0.5rem; }
+  .table tbody td:first-child { padding-left: 0.25rem; }
 
   .table thead th:last-child,
-  .table tbody td:last-child { padding-right: 0.5rem; }
+  .table tbody td:last-child { padding-right: 0.25rem; }
 
-  .col-num { width: 2.5rem; }
-  .col-arrow { width: 2rem; }
+  .table thead th { font-size: var(--text-sm); }
+
+  .col-num { width: 2rem; }
+  .col-stars { width: 4.75rem; }
+  .col-arrow { width: 1.25rem; }
   .col-cat { display: none; }
-  .col-name { white-space: normal; }
+  .col-name {
+    width: auto;
+    white-space: normal;
+  }
   .footer { padding: 1.25rem; justify-content: center; flex-wrap: wrap; }
 }