From 716464e726ea7bf462a4b994335c51f3f5b8b405 Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Thu, 19 Mar 2026 02:41:56 +0800
Subject: [PATCH] fix: improve CSS polish with active states, font smoothing,
 and text wrapping

Add active-state press feedback (scale transform) to buttons, filter clear,
and tags. Add moz-osx-font-smoothing for consistent antialiasing on Firefox/Mac.
Apply text-wrap: balance to headings and text-wrap: pretty to body text and
expanded row descriptions. Add text-underline-offset to links and highlight
active table rows with bg-hover.

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

diff --git a/website/static/style.css b/website/static/style.css
index 13f9f0bf..8f86f881 100644
--- a/website/static/style.css
+++ b/website/static/style.css
@@ -38,9 +38,10 @@ body {
   display: flex;
   flex-direction: column;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-a { color: var(--accent); text-decoration: none; }
+a { color: var(--accent); text-decoration: none; text-underline-offset: 0.15em; }
 a:hover { color: var(--accent-hover); text-decoration: underline; }
 
 /* === Skip Link === */
@@ -92,6 +93,10 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
   text-decoration: none;
 }
 
+.hero-submit:active {
+  transform: scale(0.97);
+}
+
 .hero-submit:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
@@ -103,6 +108,7 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
   font-weight: 400;
   letter-spacing: -0.01em;
   line-height: 1.1;
+  text-wrap: balance;
   color: var(--accent);
   margin-bottom: 0.75rem;
 }
@@ -112,6 +118,7 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
   color: var(--text-secondary);
   line-height: 1.6;
   margin-bottom: 0.5rem;
+  text-wrap: pretty;
 }
 
 .hero-sub a { color: var(--text-secondary); font-weight: 600; }
@@ -194,6 +201,10 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
   transition: border-color 0.15s, color 0.15s;
 }
 
+.filter-clear:active {
+  transform: scale(0.97);
+}
+
 .filter-clear:hover {
   border-color: var(--text-muted);
   color: var(--text);
@@ -342,6 +353,7 @@ th[data-sort].sort-asc::after {
 
 /* === Row Click === */
 .row { cursor: pointer; }
+.row:active td { background: var(--bg-hover); }
 
 .row:focus-visible td {
   outline: none;
@@ -385,6 +397,7 @@ th[data-sort].sort-asc::after {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   line-height: 1.6;
+  text-wrap: pretty;
   animation: expand-in 0.2s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
@@ -475,6 +488,10 @@ th[data-sort].sort-asc::after {
   inset: -0.5rem -0.25rem;
 }
 
+.tag:active {
+  transform: scale(0.95);
+}
+
 .tag:hover {
   background: var(--tag-hover-bg);
   color: var(--accent);