fix(nav): navigation links are 19 px tall on a phone #155

Nytt ärende

Stängd

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

supernaut kommenterad

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

Ägare

Every navigation target on the site is about 19 px tall. Measured at 375 px:

Target	Size (CSS px)
Sign in / Sign up	84 x 18.7, 110 x 18.7
Language switcher	75 x 18.7
About / Pricing / Documentation / News	18.7 tall
Open Bitborg	114.7 x 18.7
Every footer link	18 tall
Source code (footer)	44.5 x 15
Breadcrumb links	18 tall

The repository already defines the right token — src/style/variables.scss:254
--min-touch-target: 3rem. It is honoured by src/style/shared/button.scss:22, by
src/components/faq-filter.astro:38 and by the logo (src/components/header.astro:27), and by no
navigation link anywhere.

WCAG 2.2 SC 2.5.8 (Target Size (Minimum), AA) is currently met only through the spacing exception:
the 16 px --spacing-md gaps keep 24 px circles from intersecting. That is compliance by accident
— tightening any gap, or adding a fifth link, fails it. SC 2.5.5 (AAA, 44 px), Apple's 44 pt and
Android's 48 dp are failed outright.

Fix

Apply min-block-size: var(--min-touch-target) with centred flex alignment to navigation links
below the medium breakpoint, as vertical padding so the type size does not change. A single
shared rule beside src/style/shared/button.scss is better than editing five components, since
Astro's scoped styles will not reach into child components.

Keep the 16 px gaps.

Do this after the 320 px reflow fix — taller targets multiply the height of a navigation that
cannot currently wrap.

Breadcrumbs (src/components/breadcrumbs.astro:72-81, 8 px gap plus a / separator) need their
own decision; showing only the parent crumb below medium is worth considering.

Target size (operator decision)

44–48 px, not the 24 px the spacing exception would allow. The repository already defines
--min-touch-target: 3rem and applies it to buttons, the FAQ filter and the logo; holding
navigation to a lower bar than a button is not defensible, and compliance that depends on gaps never
tightening is not compliance.

Done when

Every link in the header, footer and breadcrumbs measures at least 44 px on its block axis
below the medium breakpoint.
Layout at 768 px and above is unchanged.
The header is not taller than it is today (pair with the header-compaction issue).

Part of gitborg/gitborg-docs#67.

Every navigation target on the site is about 19 px tall. Measured at 375 px: | Target | Size (CSS px) | | --- | --- | | Sign in / Sign up | 84 x 18.7, 110 x 18.7 | | Language switcher | 75 x 18.7 | | About / Pricing / Documentation / News | 18.7 tall | | Open Bitborg | 114.7 x 18.7 | | Every footer link | 18 tall | | Source code (footer) | 44.5 x 15 | | Breadcrumb links | 18 tall | The repository already defines the right token — `src/style/variables.scss:254` `--min-touch-target: 3rem`. It is honoured by `src/style/shared/button.scss:22`, by `src/components/faq-filter.astro:38` and by the logo (`src/components/header.astro:27`), and by no navigation link anywhere. WCAG 2.2 SC 2.5.8 (Target Size (Minimum), AA) is currently met only through the spacing exception: the 16 px `--spacing-md` gaps keep 24 px circles from intersecting. That is compliance by accident — tightening any gap, or adding a fifth link, fails it. SC 2.5.5 (AAA, 44 px), Apple's 44 pt and Android's 48 dp are failed outright. ## Fix Apply `min-block-size: var(--min-touch-target)` with centred flex alignment to navigation links below the `medium` breakpoint, as vertical padding so the type size does not change. A single shared rule beside `src/style/shared/button.scss` is better than editing five components, since Astro's scoped styles will not reach into child components. Keep the 16 px gaps. Do this **after** the 320 px reflow fix — taller targets multiply the height of a navigation that cannot currently wrap. Breadcrumbs (`src/components/breadcrumbs.astro:72-81`, 8 px gap plus a `/` separator) need their own decision; showing only the parent crumb below `medium` is worth considering. ## Target size (operator decision) **44–48 px**, not the 24 px the spacing exception would allow. The repository already defines `--min-touch-target: 3rem` and applies it to buttons, the FAQ filter and the logo; holding navigation to a lower bar than a button is not defensible, and compliance that depends on gaps never tightening is not compliance. ## Done when - Every link in the header, footer and breadcrumbs measures at least 44 px on its block axis below the `medium` breakpoint. - Layout at 768 px and above is unchanged. - The header is not taller than it is today (pair with the header-compaction issue). Part of gitborg/gitborg-docs#67.

supernaut lade till etiketterna

area/web

ready-for-implementation

type

bug

2026-08-02 12:31:26 +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:22 +00:00

supernaut refererade till detta ärende från en incheckning

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