2026-08-20 — Header wide single-row chrome
Summary
Extra-wide viewports fold the toolbar into the search row and let the chrome fill the page width; narrower widths keep the two-tier max-w-6xl bar.
Highlights
-
Fit check: left cluster + logo + min search + right actions vs available page width (with hysteresis).
-
CSS
@media (min-width: 90rem)paints the single row before JS so load does not flash the two-tier bar;data-chrome-layoutlocks after measure. -
Single row order: Fan|Owner / Map / Foods / Events / About, then logo, then search, then theme / account controls.
-
Stacked mode stays centered at
max-w-6xl; single mode uses full width.--ftn-header-heightis measured so frost/scrim track the shorter chrome. -
Shell wrapper uses
display: contentsso sticky header + spline hang stick on scroll (a normal short wrapper would constrain sticky to the chrome height). -
Mobile Sheet trigger uses Lucide
Menuatsize-6again (literal burger mark was hard to read at icon-button size).