200% phone zoom: the 320px root minimum forces page scrolling #155

Closed
opened 2026-09-26 08:49:13 +00:00 by kayg · 1 comment
Owner

The #117 production break-it matrix emulates 200% browser zoom by halving the CSS viewport and using DPR 2. At 320px physical width (160 CSS px) and 390px physical width (195 CSS px), every route reports page horizontal scrolling. The document remains 320 CSS px wide because apps/web/src/routes/layout.css sets min-width: 320px on the root/page shell.

This affects the whole app, including Home, Files, Notes, Settings, and public links. Example captures:

  • /home/kayg/Developer/calternal/target/breakit/cont-breakit-117/full-final/home_320z200-paper.png
  • /home/kayg/Developer/calternal/target/breakit/cont-breakit-117/full-final/files_320z200-paper.png
  • /home/kayg/Developer/calternal/target/breakit/cont-breakit-117/full-final/settings_390z200-paper.png

The implementation currently sets a 320 CSS px minimum globally. This issue records the observed behavior for a design decision about the minimum supported CSS viewport at high zoom.

The #117 production break-it matrix emulates 200% browser zoom by halving the CSS viewport and using DPR 2. At 320px physical width (160 CSS px) and 390px physical width (195 CSS px), every route reports page horizontal scrolling. The document remains 320 CSS px wide because `apps/web/src/routes/layout.css` sets `min-width: 320px` on the root/page shell. This affects the whole app, including Home, Files, Notes, Settings, and public links. Example captures: - `/home/kayg/Developer/calternal/target/breakit/cont-breakit-117/full-final/home_320z200-paper.png` - `/home/kayg/Developer/calternal/target/breakit/cont-breakit-117/full-final/files_320z200-paper.png` - `/home/kayg/Developer/calternal/target/breakit/cont-breakit-117/full-final/settings_390z200-paper.png` The implementation currently sets a 320 CSS px minimum globally. This issue records the observed behavior for a design decision about the minimum supported CSS viewport at high zoom.
Author
Owner

Follow-up from the production width sweep at head d34e6266: the shared html, body 320px floor is removed, and Files and Tags now pass their 160px/195px 200% zoom width checks. Calendar Week still widens to 206px at a requested 160px and 207px at a requested 195px. breakit-week-zoomfix/report.json identifies clipped text in div.head-days and one partly offscreen header button. Normal phone (390px), tablet (820px), and desktop (1440px) Week visits passed in the same run. This is a remaining Calendar layout issue, outside the shared width-floor fix; no Calendar test expectation was changed.

Follow-up from the production width sweep at head `d34e6266`: the shared `html, body` 320px floor is removed, and Files and Tags now pass their 160px/195px 200% zoom width checks. Calendar Week still widens to 206px at a requested 160px and 207px at a requested 195px. `breakit-week-zoomfix/report.json` identifies clipped text in `div.head-days` and one partly offscreen header button. Normal phone (390px), tablet (820px), and desktop (1440px) Week visits passed in the same run. This is a remaining Calendar layout issue, outside the shared width-floor fix; no Calendar test expectation was changed.
kayg closed this issue 2026-09-29 08:29:14 +00:00
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
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#155
No description provided.