From 931dfbe1d3bcccea186a442596f7d034ed9e631c Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Sun, 13 Sep 2026 09:11:31 +0800
Subject: [PATCH] fix(ui): stop the header search field from crowding itself
 when space runs out

At ~628px the header overflowed horizontally by 53px: the labelled nav held
383px that flex could not reclaim, so the search field was clamped to its
200px floor and had only ~96px of text room, letting the placeholder collide
with the Ctrl+F cue and the inline toggles.

Three rules drove that:

- .header-search had a hard min-width: 200px, so it parked at a fixed width
  instead of shrinking with the space it was actually given.
- The input reserved 6.75rem for "options + filter + clear/cue", but that
  declaration never applied: search-filter.css is imported after header.css
  and its .search-container input (equal specificity) set the right padding.
  The inline chrome actually needs 126px, so text ran underneath it.
- Labels stayed on the nav down to 600px, where a labelled nav (~383px) and a
  readable search field (~300px) cannot coexist.

- Drop the min-width floors on .header-search and its container so the field
  compresses naturally.
- Reserve exactly the inline chrome (cue 58 + clear 28 + toggles 56 + gaps and
  edges 16 = 126px) and document why !important is required here.
- Add a 1366px breakpoint that hides the Ctrl+F cue and drops the reservation
  to 68px; the shortcut itself keeps working, only the visual hint goes.
- Move the nav icon fallback from 600px to 700px and keep the <=600px
  container tightening as its own query.

Verified in headless Chrome against the real stylesheet: no horizontal
overflow at any width (was 53px at 628px, 80px at 601px), and the placeholder
plus Ctrl+F cue never overlap (the same collision existed at ~1250px, where
the field now keeps 85px of text room instead of 2.8px).
---
 static/css/components/header.css | 57 ++++++++++++++++++++++++++------
 1 file changed, 47 insertions(+), 10 deletions(-)

diff --git a/static/css/components/header.css b/static/css/components/header.css
index c66242a2..fae8ab48 100644
--- a/static/css/components/header.css
+++ b/static/css/components/header.css
@@ -113,6 +113,9 @@
   display: flex;
   justify-content: center;
   max-width: 600px;
+  /* No hard floor: the field shrinks with the available space instead of parking
+     at a fixed width and crowding its own placeholder (see the 1366px query). */
+  min-width: 0;
   margin: 0 auto;
   transition: opacity 0.2s ease;
 }
@@ -121,6 +124,7 @@
 .header-search .search-container {
   width: 100%;
   max-width: 600px;
+  min-width: 0;
   position: relative;
   display: flex;
   align-items: center;
@@ -142,7 +146,12 @@
   width: 100%;
   padding: 0.5rem 0.75rem;
   padding-left: 2.25rem !important;
-  padding-right: 6.75rem !important; /* clear room for options + filter + clear/cue toggles */
+  /* Reserve exactly the inline chrome so typed text never runs under it:
+     cue(58) + clear(28) + toggles(28 + 28 + 4 gap) + edges(8 + 8) = 126px.
+     Below 1366px the cue is hidden and the reservation drops to 68px.
+     !important is required: search-filter.css loads later and sets its own
+     right padding at equal specificity (.search-container input). */
+  padding-right: 7.875rem !important;
   border: none;
   background: transparent;
   color: var(--text-color);
@@ -690,6 +699,20 @@
   margin: 0.25rem 0;
 }
 
+/* Responsive: the Ctrl+F cue is pure decoration and, above 950px, the widest
+   thing inside the field. Below 1366px the header (branding + full nav) leaves
+   too little room for it, so it steps aside and the field reclaims its 58px.
+   The shortcut itself keeps working - only the visual hint is dropped. */
+@media (max-width: 1366px) {
+  .header-search .search-shortcut-cue {
+    display: none;
+  }
+
+  .header-search input {
+    padding-right: 4.25rem !important;
+  }
+}
+
 /* Responsive: Early optimization at 1200px - reduce gaps and padding */
 @media (max-width: 1200px) {
   .header-container {
@@ -785,13 +808,12 @@
   }
 }
 
-/* For very small screens - switch nav to icons only */
-@media (max-width: 600px) {
-  .header-container {
-    padding: 0 8px;
-    gap: 0.4rem;
-  }
-
+/* For narrower screens - switch nav to icons only.
+   A labelled nav needs ~383px and a readable search field needs ~300px, so the
+   two cannot coexist below ~700px: at 601-700px the search input was previously
+   squeezed to 200px, leaving only ~96px of text room and overlapping the
+   placeholder with the inline toggles. Labels therefore collapse here. */
+@media (max-width: 700px) {
   .main-nav {
     display: flex;
     gap: 0.15rem;
@@ -799,8 +821,7 @@
   }
 
   .nav-item {
-    padding: 0.25rem;
-    font-size: 0.75rem;
+    padding: 0.25rem 0.4rem;
   }
 
   .nav-item span {
@@ -809,6 +830,22 @@
 
   .nav-item i {
     display: block;
+  }
+}
+
+/* For very small screens - tighten container spacing */
+@media (max-width: 600px) {
+  .header-container {
+    padding: 0 8px;
+    gap: 0.4rem;
+  }
+
+  .nav-item {
+    padding: 0.25rem;
+    font-size: 0.75rem;
+  }
+
+  .nav-item i {
     font-size: 1rem;
   }
 }