fix(pricing): the add-ons table scrolls the page sideways below 480 px #160

Nytt ärende

Stängd

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

supernaut kommenterad

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

Ägare

/pricing/ scrolls horizontally at every width up to 414 px. Measured:

320 px viewport -> documentElement.scrollWidth 437
375 px viewport -> 438
414 px viewport -> 437
overflowing element: table.table  x=24  right=437  width=413

WCAG 2.2 SC 1.4.10 (Reflow, AA). This is the conversion page, and unlike the header issue it
overflows well above the 320 px floor.

src/style/typography.scss:94-96 sets table { max-inline-size: 100% }, which cannot shrink a
table whose min-content width is 413 px: three columns, th,td { padding: 0.5em 1em }
(typography.scss:102-106), one column holding a full sentence. Affects src/pages/pricing.astro:99
and src/pages/en/pricing.astro:97.

Fix

Either restructure the add-ons table into stacked definition rows below the small breakpoint
(reads better on a phone), or wrap tables in an overflow-x: auto container. If the scroller: a
keyboard-reachable scroll container needs tabindex="0" and an accessible name
(role="region" with aria-label), or it becomes an unlabelled tab stop.

Done when

At 320, 375 and 414 px, document.documentElement.scrollWidth on /pricing/ and /en/pricing/
is not greater than clientWidth.
Every cell is readable without pinch-zoom.
If a scroller is used, it is reachable by keyboard and has an accessible name.

Part of gitborg/gitborg-docs#67.

`/pricing/` scrolls horizontally at every width up to 414 px. Measured: 320 px viewport -> documentElement.scrollWidth 437 375 px viewport -> 438 414 px viewport -> 437 overflowing element: table.table x=24 right=437 width=413 WCAG 2.2 SC 1.4.10 (Reflow, AA). This is the conversion page, and unlike the header issue it overflows well above the 320 px floor. `src/style/typography.scss:94-96` sets `table { max-inline-size: 100% }`, which cannot shrink a table whose min-content width is 413 px: three columns, `th,td { padding: 0.5em 1em }` (`typography.scss:102-106`), one column holding a full sentence. Affects `src/pages/pricing.astro:99` and `src/pages/en/pricing.astro:97`. ## Fix Either restructure the add-ons table into stacked definition rows below the `small` breakpoint (reads better on a phone), or wrap tables in an `overflow-x: auto` container. If the scroller: a keyboard-reachable scroll container needs `tabindex="0"` **and** an accessible name (`role="region"` with `aria-label`), or it becomes an unlabelled tab stop. ## Done when - At 320, 375 and 414 px, `document.documentElement.scrollWidth` on `/pricing/` and `/en/pricing/` is not greater than `clientWidth`. - Every cell is readable without pinch-zoom. - If a scroller is used, it is reachable by keyboard and has an accessible name. Part of gitborg/gitborg-docs#67.

supernaut lade till etiketterna

area/web

ready-for-implementation

type

bug

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

supernaut refererade till detta ärende från en incheckning

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