Settings detail pane overflows its glass frame at ~1300 px (Text card renders outside); width-sweep containment test #518

Closed
opened 2026-09-30 13:58:02 +00:00 by kayg · 1 comment
Owner

Owner report (2026-09-30, screenshot, browser about 1300 px wide, /settings/appearance, dark theme): "overflow issue again at this width?"

At this middle width (the pane layout between phone and full desktop), the Settings detail pane's outer glass frame ends at the "Text" heading, and the Text card (Interface, Display, Mono, Text size) renders below and outside the frame's rounded bottom edge. It is the same class of bug as #511 (fixed only for the phone list): a bounded glass container with content flowing past it.
Note: the unmerged webcal branch (#431, job/webcal-431) contains "tablet Settings deep links so the detail pane scrolls while the glass frame stays anchored". Check it, reuse it, and do not duplicate it (merge round 2 is merging webcal now; coordinate by basing on origin/dev after that lands, or port that exact change).
Fix at the root: every Settings layout (phone list, phone detail, tablet split, desktop split) either grows its glass with its content or scrolls INSIDE the glass, with the background covering the whole scroll area. Nothing may ever render outside its glass container.
Test: a width sweep e2e, from 360 to 1680 px in 40 px steps × the tallest Settings pages (Appearance, Account, Apps, Admin Users). At every width, assert that every card's rect is inside its scroll container's painted rect, and that there is no horizontal page scroll. Screenshots at 1024, 1180, 1300 and 1440 in both themes, with 3× crops of the pane bottom. Web gates.

## Owner report (2026-09-30, screenshot, browser about 1300 px wide, /settings/appearance, dark theme): "overflow issue again at this width?" At this middle width (the pane layout between phone and full desktop), the Settings detail pane's outer glass frame ends at the "Text" heading, and the Text card (Interface, Display, Mono, Text size) renders below and outside the frame's rounded bottom edge. It is the same class of bug as #511 (fixed only for the phone list): a bounded glass container with content flowing past it. Note: the unmerged webcal branch (#431, job/webcal-431) contains "tablet Settings deep links so the detail pane scrolls while the glass frame stays anchored". Check it, reuse it, and do not duplicate it (merge round 2 is merging webcal now; coordinate by basing on origin/dev after that lands, or port that exact change). **Fix at the root:** every Settings layout (phone list, phone detail, tablet split, desktop split) either grows its glass with its content or scrolls INSIDE the glass, with the background covering the whole scroll area. Nothing may ever render outside its glass container. **Test:** a width sweep e2e, from 360 to 1680 px in 40 px steps × the tallest Settings pages (Appearance, Account, Apps, Admin Users). At every width, assert that every card's rect is inside its scroll container's painted rect, and that there is no horizontal page scroll. Screenshots at 1024, 1180, 1300 and 1440 in both themes, with 3× crops of the pane bottom. Web gates.
Author
Owner

Mid-width fix merged into dev at 1e634aefb (merged-tree web gates 903/903).

Mid-width fix merged into dev at 1e634aefb (merged-tree web gates 903/903).
kayg closed this issue 2026-09-30 16:59:04 +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#518
No description provided.