One long label evicts a whole nav item

A five-item nav row built with white-space:nowrap + overflow:hidden loses an entire tab once one sibling label is long enough to push it past the container edge at 768×500. flex-wrap keeps every link reachable.

After: One long label evicts a whole nav item — After — download the fixture source

What was actually checked

Viewport 768×500 · Chromium (Chrome for Testing) 153.0.8010.12

Before: nav overflows its box and a link is unreachablePASS

scrollWidth 648px vs clientWidth 618px · overflowsBox: true · all 5 links inside container: false

After: nav fits its box and every link is reachablePASS

scrollWidth 618px vs clientWidth 618px · overflowsBox: false · all 5 links inside container: true

Reproduction

node review-pattern-evidence/03-long-label-nav-overflow/capture.mjs (Node + playwright-core; loads the fixtures below over file:// and screenshots both states)

Fixture: review-pattern-evidence v1, scenario 03, captured 2026-09-17

What this doesn't prove

Synthetic, hand-built HTML/CSS fixture — not a capture of the live UIProof product or any real customer UI.
Assertion is limited to DOM geometry (scrollWidth/clientWidth + per-link bounding boxes) at one fixed viewport; it does not test RTL layouts, dynamic label lengths, or other browsers.
No network, no server, no auth, no email, no persistence is exercised or claimed.

Provenance: Hand-authored standalone HTML/CSS fixture, executed once via a disposable Playwright-managed Chromium; not derived from a real customer UI. Editorially approved by Controller review on 2026-09-17.

Read more in the visual release review guide, or use the release-review checklist on your own release.