Mobile responsive audit — evidence¶
Before/after evidence for the four defects found by the 2026-07 mobile responsive audit (all fixes CSS-only; "before" states recreated by injecting the pre-fix rules). Generated by test/visual/mobile-responsive-evidence.mjs; regression-guarded by test/visual/mobile-responsive.spec.js (smoke tier, real phone emulation).
| # | Montage | Defect | Fix |
|---|---|---|---|
| 01 | 01-author-card-overflow.png |
"About the Author" card: flexbox min-width: auto propagated the widest white-space: nowrap expertise chip, pushing the page to 339px on a 320px phone — the layout viewport widens, the fixed header stops short, the page pans sideways |
_sass/components/_author.scss: min-width: 0 on the card's text column; expertise badges wrap |
| 02 | 02-consent-fab-stacking.png |
Cookie-consent banner flattened to z-index: 1 by the .zer0-bg-body child-elevation rule (it matched .position-fixed, only .fixed-top was excluded) — the chat (z 1052) and local-graph (z 1060) FABs painted over the banner and stole taps from Reject All / Accept All |
_sass/theme/_backgrounds.scss: exclude .position-fixed from the elevation rule so the --zer0-layer-* tokens apply (banner 1095, #tocFab 1055 restored too) |
| 03 | 03-tap-targets.png |
17 footer links ~19px tall / icon-only social links ~16px wide, and 22px-tall code-copy buttons — under the WCAG 2.5.8 24px minimum | _sass/components/_footer.scss: block padding on text links + 28px minimum box for icon links; _sass/core/code-copy.scss: min-height 24px (32px on coarse pointers) |
| 04 | 04-toc-chat-fab-stack.png |
The mobile ToC FAB and the AI-chat toggle both claimed the right-edge slot above back-to-top (bottom: offset + size + gap vs the chat's bottom: 4.5rem), overlapping by ~36px with the ToC painting over the chat button |
_includes/components/ai-chat.html: below lg, body:has(#tocFab) steps the chat toggle (and its panel) one slot higher; panel also gains a viewport-relative max-height cap so it can't poke above short viewports |
metrics.json records the numbers behind the pictures: the author-card overflow sweep (19px → 0 at 320px), banner z-index and blocked-tap-point counts, and footer/copy tap-target sizes per state.