Mobile responsiveness across the portal + viewport regression test #46

talha.ahmed · 2026-09-02T10:32:48Z

talha.ahmed commented

2026-09-02 10:32:48 +00:00

Makes every screen usable from 320px through desktop, with desktop layouts unchanged.

Grid blowout guard (.grid > * / .rbac-layout > * / .progress-stage-grid > * min-width:0) — fixes clipped cards on CV Import, Interviews, Tasks, Access Control, Progress
Calendar: minmax(0,1fr) columns — SAT column was clipped off-screen at 320
Tasks filter seg wraps; card-heads wrap <=900px
Sticky mobile table column now pins the identity (first) column, was nth-child(2)
Tooltips out of layout until hover + content pane overflow-x clip — no more sideways wiggle
Ask Analytics form styled + stacks on phones; bar chart x-labels thin by width
New npm run test:mobile (puppeteer-core devDep, drives installed Chrome): all 27 routes at 320/375/390/430/768 — fails on sideways scroll or runtime errors
Fix from main: /progress smoke failure — the route was added without registering the Progress screen in the smoke harness map

Verification: npm run verify green (build, 31 routes smoke, token, theme) and npm run test:mobile green on the merged tree.

🤖 Generated with Claude Code

Makes every screen usable from 320px through desktop, with desktop layouts unchanged. - Grid blowout guard (`.grid > *` / `.rbac-layout > *` / `.progress-stage-grid > *` min-width:0) — fixes clipped cards on CV Import, Interviews, Tasks, Access Control, Progress - Calendar: minmax(0,1fr) columns — SAT column was clipped off-screen at 320 - Tasks filter seg wraps; card-heads wrap <=900px - Sticky mobile table column now pins the identity (first) column, was nth-child(2) - Tooltips out of layout until hover + content pane overflow-x clip — no more sideways wiggle - Ask Analytics form styled + stacks on phones; bar chart x-labels thin by width - New `npm run test:mobile` (puppeteer-core devDep, drives installed Chrome): all 27 routes at 320/375/390/430/768 — fails on sideways scroll or runtime errors - Fix from main: /progress smoke failure — the route was added without registering the Progress screen in the smoke harness map Verification: `npm run verify` green (build, 31 routes smoke, token, theme) and `npm run test:mobile` green on the merged tree. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

talha.ahmed added 3 commits 2026-09-02 10:32:49 +00:00

14c78970bd Mobile responsiveness: fix grid blowouts, calendar clipping, wrapping controls; add viewport test

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>

75972d29b2 Merge origin/main into Talha (requisitions, progress screens, ATS order-by)

ea43b02b99 Post-merge: Progress screen mobile fixes, register Progress in smoke harness

- .progress-stage-grid gets the same min-width:0 blowout guard as .grid,
  and stacks to one column under 400px (two columns left ~56px for a
  stage label at 320)
- mobile.test.mjs: add the new progress/requisitions routes (27 total)
- __smoke__/entry.jsx: main added the /progress route but never
  registered the Progress screen in the harness map, so the smoke test
  rendered h(undefined) and /progress failed on main itself

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

talha.ahmed merged commit 182ee134ec into main

2026-09-02 10:33:03 +00:00

talha.ahmed referenced this issue from a commit

2026-09-02 10:33:03 +00:00

Merge pull request 'Mobile responsiveness across the portal + viewport regression test' (#46) from Talha into main

talha.ahmed referenced this issue from a commit

2026-09-02 11:29:04 +00:00

Merge origin/main into Talha (history logs, page-size dropdown)

Sign in to join this conversation.

No reviewers

No Label

No Milestone