# 0074. UI mobile layout: wrapping header, and a scrollbar gutter instead of scroll-lock padding

Status: Accepted · Date: 2026-10-26 · Design section: UI
Decided: The header wraps on phones, with the nav on its own row that scrolls inside itself; the modal scroll lock stops padding the body, and `html` gets `scrollbar-gutter: stable`

## Context

On a ~390px phone the logo, five nav links and the theme button did not fit in one row, so the page grew wider than the viewport. Opening a Dialog or Select then locked body scroll in `ui/src/lib/radix/internal/modal-layer.ts`, which added `padding-right` equal to `window.innerWidth - documentElement.clientWidth`. With an overflowing or zoomed-out mobile layout viewport that difference is not a scrollbar, so the body got a large right padding and the content collapsed into a narrow column.

## Decision

1. The header is `flex-wrap`; below `sm` the nav is `order-last w-full overflow-x-auto`, so it can never widen the page. From `sm` up the layout is the previous single row.
2. The scroll lock no longer measures a scrollbar or pads the body; it only sets `overflow: hidden` and restores it. `html { scrollbar-gutter: stable }` in `index.css` reserves the gutter whether or not the body overflows, so a classic scrollbar hiding under a dialog shifts nothing, and it is a no-op for overlay scrollbars on phones. (An `offsetWidth - clientWidth` measurement was rejected: the viewport owns the scrollbar, so on `<html>` it reads about 0.)
3. `DialogContent` gets `max-h-[calc(100dvh-2rem)] overflow-y-auto` so tall dialogs fit short screens.

## Consequences

- No new component or i18n key; a hamburger menu was not needed because the nav row scrolls.
- Not verified in a real browser (none in `nix develop`); checked by reading the markup and classes.