Matt
2f1e1b5f3f
Two Bucket 1 quick-fixes from the 2026-05-22 visual audit, both
1-2-line CSS changes with outsized visual impact.
PageHeader stack point: lg → xl
The earlier sm → lg revision (commit 6d665d0) fixed the 768 tablet
crush but introduced a SECOND crush at exactly 1024: that's where
the desktop shell mounts (sidebar = 256px) AND lg:flex-row kicks
in, leaving the title cell to compete with a 4-button action row
in only ~720px of content. Title degraded to "(" and "Last 30
days" wrapped three-deep ("Last / 30 / days"). Moving to xl
(1280) keeps the strip stacked through tablet AND the narrowest
desktop width. Verified via Playwright at 1024 — title now reads
cleanly with the action row stacked below.
Topbar tablet logo trigger:
AppShell mounts a logo button in Topbar's leadingSlot prop on
tablet (the design intent: click logo → sidebar Sheet slides in).
Live screenshot at 768 showed zero affordance — search bar started
at the very left edge of the visible viewport. Two root causes,
both fixed:
- center grid column was minmax(420px, 800px) which starved the
left column to ~100px at 768 width (no sidebar present).
Changed to minmax(280px, 800px) at base, minmax(420px, 800px)
only at lg+.
- search container had unconditional sm:-translate-x-...
shifting it 128px LEFT to compensate for a sidebar that isn't
present at tablet, pulling the search input over the leading-
slot. Gated the translate to lg: so it only kicks in when the
sidebar is actually inline.
Verified via Playwright at 768 — hamburger icon now appears in
the top-left corner; search bar sits to its right without overlap.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>