fix(nav): the header scrolls sideways at 320 px #153

Nytt ärende

Stängd

öppnade 2026-08-02 12:30:07 +00:00 av supernaut · 0 kommentarer

supernaut kommenterad

2026-08-02 12:30:07 +00:00

Ägare

The whole document scrolls horizontally at 320 CSS px, on every page. Measured in headless
Chromium at 320 x 780, isMobile:

documentElement.scrollWidth = 347   clientWidth = 320
overflowing element: nav.extra-links  x=184  right=347  width=163

Reproduced on /, /en/, /docs/ and /pricing/. WCAG 2.2 SC 1.4.10 (Reflow, AA) requires
content to be presentable at 320 CSS px without scrolling in two directions.

Cause

Three things in src/components/main-navigation.astro compound:

:36 flex-wrap: nowrap on .main-navigation — the two child navigations can never move onto
separate rows, so the row cannot be narrower than the sum of their min-content widths.
:61 white-space: nowrap on every link — "Gå till Bitborg" (114.7 px) cannot break.
:51 padding-inline: var(--page-margin) on both .main-links and .extra-links, so the 24 px
page margin is paid four times across one row: 96 px of a 320 px viewport, plus the 24 px
--navigation-gap at :35.

163 + 160 + 24 = 347. Swedish is the worse case, and Swedish is the default language.

Fix

Let the row wrap below the small breakpoint.
Apply padding-inline once, on .main-navigation, not on each child navigation.

Done when

At 320 px, on /, /en/, /docs/ and /pricing/, document.documentElement.scrollWidth is
not greater than clientWidth.
The layout at 768 px and above is unchanged.
aria-current="page" still marks the current page in both languages (src/lib/nav.test.ts
still passes untouched).

Part of gitborg/gitborg-docs#67.

The whole document scrolls horizontally at 320 CSS px, on every page. Measured in headless Chromium at 320 x 780, `isMobile`: documentElement.scrollWidth = 347 clientWidth = 320 overflowing element: nav.extra-links x=184 right=347 width=163 Reproduced on `/`, `/en/`, `/docs/` and `/pricing/`. WCAG 2.2 SC 1.4.10 (Reflow, AA) requires content to be presentable at 320 CSS px without scrolling in two directions. ## Cause Three things in `src/components/main-navigation.astro` compound: - `:36` `flex-wrap: nowrap` on `.main-navigation` — the two child navigations can never move onto separate rows, so the row cannot be narrower than the sum of their min-content widths. - `:61` `white-space: nowrap` on every link — "Gå till Bitborg" (114.7 px) cannot break. - `:51` `padding-inline: var(--page-margin)` on both `.main-links` and `.extra-links`, so the 24 px page margin is paid four times across one row: 96 px of a 320 px viewport, plus the 24 px `--navigation-gap` at `:35`. 163 + 160 + 24 = 347. Swedish is the worse case, and Swedish is the default language. ## Fix - Let the row wrap below the `small` breakpoint. - Apply `padding-inline` once, on `.main-navigation`, not on each child navigation. ## Done when - At 320 px, on `/`, `/en/`, `/docs/` and `/pricing/`, `document.documentElement.scrollWidth` is not greater than `clientWidth`. - The layout at 768 px and above is unchanged. - `aria-current="page"` still marks the current page in both languages (`src/lib/nav.test.ts` still passes untouched). Part of gitborg/gitborg-docs#67.

supernaut lade till etiketterna

area/web

ready-for-implementation

type

bug

2026-08-02 12:31:25 +00:00

~~supernaut refererade till detta ärende från bitborg/bitborg-docs 2026-08-02 12:32:47 +00:00~~

Small-screen portal experience: reflow, target size and navigation accessibility #67

supernaut lade till detta till projektet Bitborg Web

2026-08-02 12:34:20 +00:00

supernaut refererade till detta ärende från en incheckning

2026-08-02 15:50:42 +00:00