fix(nav): tighten the account-link gap on small screens #245

Sammanfogat

supernaut sammanfogade 2 incheckningar från work/156 in i main

2026-09-21 10:26:43 +00:00

supernaut kommenterad

2026-09-20 22:50:30 +00:00

Ägare

This does not close #156. It is the one measurable improvement left inside that issue's constraints, plus the measurements that show why the target is out of reach there.

What changed

.user-menu gap drops from var(--spacing-md) to var(--spacing-sm) below medium. Sign in and Sign up still wrap to two lines for the longer Swedish labels, and always will: even at zero gap, "Logga in" plus "Skapa konto" is about a pixel too wide for the row. The tighter gap shaves 8 px off the wrapped stack.

Measured with Chromium, on the built site, getBoundingClientRect() on header.site-header and <main>:

width	before, header	after, header	after, `/docs/faq/` main top
320	242	234	337.7
360	242	234	311
375	242	234	311
414	210	210	287
480	210	210	287
600	146	146	223
768	221.6	221.6	269.3

An asymmetric brand padding was tried and reverted: it let the logo's fluid sizing grow into the freed width, netting nothing.

Why #156 stays open

Three of its four fix bullets were already shipped by #170 and the issue was never closed. .brand padding is already var(--spacing-md) below medium, the brand and user menu already share one row, and the language switcher is already rendered by the footer below medium. The fourth bullet says logo height 48 to 40. It is 24 today, and logo.astro explains why: at 40 px the logo is wide enough at its 5:1 aspect to push the account row off the shared band and reinstate a row. Following the number literally would make the header taller.

The issue's baseline no longer reproduces for the same reason. It records 278 px at 375 px; current main measures 242 px.

The remaining target, 170 px at 375 px, is not reachable under this issue's constraints. Breaking the header down: .header-band is 80 to 104 px, .main-navigation is 130 px. The five main navigation links wrap to two rows below small, and each row is held to the 48 px WCAG 2.5.8 touch-target minimum by src/style/shared/navigation.scss:19-27. Even a perfect one-row band leaves roughly 178 to 210 px. Getting under 170 px needs fewer or regrouped navigation rows, touch targets below the WCAG minimum, or a JavaScript disclosure pattern. All three are outside what #156 allows.

Acceptance

Header at most 170 px at 375 px, main within 220 px on a breadcrumbed page: not met, and see above.
Header varies by no more than one row between pages at the same width: met. Identical across /, /pricing/ and /docs/faq/ at every tested width.
Layout at 768 px and above unchanged: met.
No navigation link removed or hidden behind an interaction: met.

pnpm lint, pnpm check and pnpm test (361 passed) all pass.

Refs #156

**This does not close #156.** It is the one measurable improvement left inside that issue's constraints, plus the measurements that show why the target is out of reach there. ## What changed `.user-menu` gap drops from `var(--spacing-md)` to `var(--spacing-sm)` below `medium`. Sign in and Sign up still wrap to two lines for the longer Swedish labels, and always will: even at zero gap, "Logga in" plus "Skapa konto" is about a pixel too wide for the row. The tighter gap shaves 8 px off the wrapped stack. Measured with Chromium, on the built site, `getBoundingClientRect()` on `header.site-header` and `<main>`: | width | before, header | after, header | after, `/docs/faq/` main top | | --- | --- | --- | --- | | 320 | 242 | 234 | 337.7 | | 360 | 242 | 234 | 311 | | 375 | 242 | 234 | 311 | | 414 | 210 | 210 | 287 | | 480 | 210 | 210 | 287 | | 600 | 146 | 146 | 223 | | 768 | 221.6 | 221.6 | 269.3 | An asymmetric brand padding was tried and reverted: it let the logo's fluid sizing grow into the freed width, netting nothing. ## Why #156 stays open Three of its four fix bullets were already shipped by #170 and the issue was never closed. `.brand` padding is already `var(--spacing-md)` below `medium`, the brand and user menu already share one row, and the language switcher is already rendered by the footer below `medium`. The fourth bullet says logo height 48 to 40. It is 24 today, and `logo.astro` explains why: at 40 px the logo is wide enough at its 5:1 aspect to push the account row off the shared band and reinstate a row. Following the number literally would make the header taller. The issue's baseline no longer reproduces for the same reason. It records 278 px at 375 px; current main measures 242 px. The remaining target, 170 px at 375 px, is not reachable under this issue's constraints. Breaking the header down: `.header-band` is 80 to 104 px, `.main-navigation` is 130 px. The five main navigation links wrap to two rows below `small`, and each row is held to the 48 px WCAG 2.5.8 touch-target minimum by `src/style/shared/navigation.scss:19-27`. Even a perfect one-row band leaves roughly 178 to 210 px. Getting under 170 px needs fewer or regrouped navigation rows, touch targets below the WCAG minimum, or a JavaScript disclosure pattern. All three are outside what #156 allows. ## Acceptance - Header at most 170 px at 375 px, main within 220 px on a breadcrumbed page: **not met**, and see above. - Header varies by no more than one row between pages at the same width: **met**. Identical across `/`, `/pricing/` and `/docs/faq/` at every tested width. - Layout at 768 px and above unchanged: **met**. - No navigation link removed or hidden behind an interaction: **met**. `pnpm lint`, `pnpm check` and `pnpm test` (361 passed) all pass. Refs #156

supernaut lade till 1 incheckning

2026-09-20 22:50:30 +00:00

fix(nav): tighten the header user-menu row below medium

ci / ci (pull_request) Successful in 1m27s

Detaljer

bfddbe9bad

supernaut refererade till denna ändringsförfrågan

2026-09-20 22:50:47 +00:00

fix(nav): shrink the header on small screens #156

supernaut lade till 1 incheckning

2026-09-21 10:20:09 +00:00

merge main into work/156