Audited all 25 routes at 320/375/390/430/768 with browser automation.
Root cause of most overflows: grid items default min-width:auto, so one
wide intrinsic child (a select option, the 620px RBAC matrix) pushed
whole cards past the viewport.
- .grid > * / .rbac-layout > * min-width:0 (CV Import, Interviews,
Tasks, Access Control card blowouts)
- calendar: minmax(0,1fr) columns — SAT was clipped off-screen at 320
- .seg wraps (Tasks filters), .card-head wraps <=900
- sticky mobile table column: first column (identity), was nth-child(2)
- tooltips display:none until hover + .content overflow-x clip (killed
a 7px sideways wiggle from invisible tooltip boxes)
- Ask Analytics form: design-system input styling, stacks on phones
- bar/grouped-bar charts thin x labels by slot width (overlap on phones)
- Candidates sort label+select wrap as one unit
- new: mobile.test.mjs + npm run test:mobile (puppeteer-core devDep,
drives installed Chrome) — fails on sideways scroll or runtime errors
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Talha Ahmed
ahmed.mujtaba