From a92b1a6e867fd4088b521086c2cff1851c8cae6f Mon Sep 17 00:00:00 2001 From: Vinta Chen Date: Sun, 22 Mar 2026 23:42:18 +0800 Subject: [PATCH] fix(css): fix hero topbar layout on small screens Split hero-topbar and footer selectors to apply distinct responsive styles. The topbar now uses a horizontal row layout with nowrap so the nav link does not stack vertically, while hero-topbar-actions and hero-topbar-link get auto widths to avoid stretching full-width. Co-Authored-By: Claude --- website/static/style.css | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/website/static/style.css b/website/static/style.css index 73d147c..7e0f847 100644 --- a/website/static/style.css +++ b/website/static/style.css @@ -1005,19 +1005,34 @@ th[data-sort].sort-asc::after { min-height: auto; } - .hero-topbar, + .hero-topbar { + align-items: center; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + gap: 0.75rem; + } + .footer { align-items: flex-start; flex-direction: column; } - .hero-topbar-actions, .hero-actions, .final-cta-actions { width: 100%; } - .hero-topbar-link, + .hero-topbar-actions { + width: auto; + flex: 0 0 auto; + } + + .hero-topbar-link { + width: auto; + white-space: nowrap; + } + .hero-action { width: 100%; }