Phone at 200% zoom clips the header controls and the + button on every Tab #1611

Closed
opened 2026-10-12 11:41:39 +00:00 by kayg · 2 comments
Owner

At 200% zoom on a phone (195 CSS px wide) the header controls and the create "+" are clipped on every Tab (break-ui review #1598: artifacts/ui-breakui/shots/worst/cal-week@390z200-light.png, home@390z200-light.png, money@390z200-light.png on branch worktree-agent-a0afcda97025f5170). The view switcher runs off the right edge, and the Tab tray loses its "+" button.

WCAG 1.4.10 Reflow: at 320 CSS px (and narrower at zoom) every control stays reachable without horizontal scroll. Collapse the view switcher into a menu button, and keep "+" inside the tray width.

At 200% zoom on a phone (195 CSS px wide) the header controls and the create "+" are clipped on every Tab (break-ui review #1598: artifacts/ui-breakui/shots/worst/cal-week@390z200-light.png, home@390z200-light.png, money@390z200-light.png on branch worktree-agent-a0afcda97025f5170). The view switcher runs off the right edge, and the Tab tray loses its "+" button. WCAG 1.4.10 Reflow: at 320 CSS px (and narrower at zoom) every control stays reachable without horizontal scroll. Collapse the view switcher into a menu button, and keep "+" inside the tray width.
Author
Owner

Branch job/ui-zoom11, head d85521b9b (worktree agent-af313337075d5e528). Tray: row placement shrinks and scrolls so + stays inside; ModeHeader folds the Calendar view switcher into a SegmentedMenu below 360px, 2 trailing buttons below 360, 1 below 240 (Copy link into the menu); Money title keeps the row on phones (#1613 item 3). Evidence: artifacts/ui-zoom11/{before,after}. Gates: bun run check exit=0 (0 errors); bun run test: Test Files 322 passed (322), Tests 2348 passed (2348); perf-lint PASS, ratchet.json untouched.

Branch job/ui-zoom11, head d85521b9b (worktree agent-af313337075d5e528). Tray: row placement shrinks and scrolls so + stays inside; ModeHeader folds the Calendar view switcher into a SegmentedMenu below 360px, 2 trailing buttons below 360, 1 below 240 (Copy link into the menu); Money title keeps the row on phones (#1613 item 3). Evidence: artifacts/ui-zoom11/{before,after}. Gates: bun run check exit=0 (0 errors); bun run test: Test Files 322 passed (322), Tests 2348 passed (2348); perf-lint PASS, ratchet.json untouched.
Author
Owner

Deployed to calternal.cloud as build 5423c52c7 (fast lane).

Deployed to calternal.cloud as build 5423c52c7 (fast lane).
kayg closed this issue 2026-10-12 14:55:34 +00:00
Commenting is not possible because the repository is archived.
No labels
No milestone
No project
No assignees
1 participant
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal-v0#1611
No description provided.