whisper-money/resources
Víctor Falcón 98f03db50c
fix(landing): keep the header from overflowing at mid widths (#791)
## What

The Roadmap item pushed the landing header past the viewport on narrow
laptops: the logo wrapped onto two lines and, in Spanish, the register
button was clipped off screen (at 640px the nav needed 670px).

Between `sm` and `lg` the nav is now icon-only and tighter:

- Roadmap / Github / Discord keep their labels only from `lg` up. The
label stays `sr-only` instead of `display:none`, so the icons keep their
accessible name — before this they announced as "link", "link 1096",
"link". The GitHub star count stays visible at every width.
- Button padding, nav gap and the wordmark size all step down below
`lg`, which is what buys back the room Spanish needs. At 640px the nav
now ends on the 24px page padding instead of 10px past it, with 22px of
air between logo and nav.
- The logo gets `shrink-0` + `whitespace-nowrap`, so it can no longer
wrap.

## Also

- The logo links back to the landing page on every page but the landing
itself (the page is detected by URL, so `?ref=` links behave). Before
this, a phone visitor on `/roadmap` had no way back other than the
browser's back button.
- The mobile pill header drops its Github/Discord buttons and separator:
they were `hidden … sm:flex` inside a `sm:hidden` header, so they could
never render.
- The three nav buttons collapse into a local `NavButton`, so the
breakpoint lives in one place instead of three.

## QA

Browser QA against the dev server on `/` and `/roadmap`, in Spanish (the
longest of our strings) and English, at 390 / 640 / 672 / 1024 / 1280:

- 640px es: no horizontal overflow, right padding intact, nothing
clipped.
- 1024px+: labels are back, layout unchanged from today.
- 390px: the mobile pill is untouched.
- Logo click on `/roadmap` navigates to `/`; on `/` it renders as a
plain `div` in both headers.

Unit tests cover the logo routing branch. The responsive band itself is
visual-QA only — jsdom cannot evaluate Tailwind breakpoints, and a
className assertion would be brittle.

## Demo

<!-- PLACEHOLDER: drag the screenshots here (390 / 640 / 672 / 1280,
Spanish) -->
2026-08-12 15:47:03 +02:00
..
css fix(charts): improve contrast for chart colors 9-10 (#614) 2026-06-30 10:28:03 +00:00
js fix(landing): keep the header from overflowing at mid widths (#791) 2026-08-12 15:47:03 +02:00
views feat(reports): email a monthly CSV of active user emails to the owners (#783) 2026-08-12 11:29:28 +02:00