feat(#389): mobile wave C — layers at phone width #522

Merged

Cordy merged 4 commits from fix-389c into main

2026-09-13 19:00:41 +00:00

Cordy commented

2026-09-13 18:59:36 +00:00

Owner

Wave C of the #389 mobile pass: the layered surfaces.

Preview takeover (≤480px): the panel already went fixed full-width below 700px; it now covers the top bar too (top:0, 100dvh, z-70 above the tab bar, which hides via body[data-pv] while a preview is open), with safe-area padding and larger head icons. Opening a preview pushes one history entry so the system back gesture closes the preview instead of leaving the app; closing consumes it. The pushed flag drops when the viewport widens, so desktop history is never touched. A horizontal swipe on the panel steps through sibling files with the same skip-folders logic as the existing ArrowUp/ArrowDown handler (60px threshold, vertical scrolls ignored, passive listeners).

Dialogs (≤480px): bottom cards — full-width, top-rounded, 90dvh cap with sticky .dlgactions (44px buttons) and 16px form inputs so iOS stops zooming. Element-selector override, so per-dialog id rules (e.g. #seatdlg) keep their widths.

Picker (≤480px): the audit .pickpop popover becomes a bottom sheet with a 45dvh tree cap.

Desktop invariant (≥820px): no new base rules needed — every selector this wave touches already exists in desktop CSS, and all overrides are inside the max-width fence; the gate now also asserts body[data-pv] never appears outside media blocks. node --check green on both script blocks.

Wave C of the #389 mobile pass: the layered surfaces. **Preview takeover (≤480px):** the panel already went fixed full-width below 700px; it now covers the top bar too (`top:0`, `100dvh`, z-70 above the tab bar, which hides via `body[data-pv]` while a preview is open), with safe-area padding and larger head icons. Opening a preview pushes **one** history entry so the system back gesture closes the preview instead of leaving the app; closing consumes it. The pushed flag drops when the viewport widens, so desktop history is never touched. A horizontal swipe on the panel steps through sibling files with the same skip-folders logic as the existing ArrowUp/ArrowDown handler (60px threshold, vertical scrolls ignored, passive listeners). **Dialogs (≤480px):** bottom cards — full-width, top-rounded, 90dvh cap with sticky `.dlgactions` (44px buttons) and 16px form inputs so iOS stops zooming. Element-selector override, so per-dialog id rules (e.g. `#seatdlg`) keep their widths. **Picker (≤480px):** the audit `.pickpop` popover becomes a bottom sheet with a 45dvh tree cap. **Desktop invariant (≥820px):** no new base rules needed — every selector this wave touches already exists in desktop CSS, and all overrides are inside the max-width fence; the gate now also asserts `body[data-pv]` never appears outside media blocks. `node --check` green on both script blocks.

Cordy added 4 commits

2026-09-13 18:59:38 +00:00

scout: wave-C anchors (pvpanel, openPreview/close, siblings, dialogs, pickpop) 516c4b2d21

diag: sibling keydown body, dialog css, pickpop mechanism 0fd2c211ed

one-shot: #389 wave C - layers (preview takeover, dialog cards, picker sheet) 4c9b4caacb

feat(#389 ): mobile wave C - layers at phone width

ci / test-and-build (pull_request) Successful in 52s

Details

4922d4f043

The preview panel already went fixed full-width below 700px; at phone
width it now becomes a true takeover: over the top bar, above the tab
bar (hidden via body[data-pv] while open), 100dvh with safe-area
padding and larger touch targets on the head icons. Opening a preview
pushes one history entry so the system back gesture closes it instead
of leaving the app; closing consumes that entry, and the pushed flag
is dropped when the viewport widens so desktop history is never
touched. A horizontal swipe on the panel steps through sibling files
with the same skip-folders logic as the existing ArrowUp/ArrowDown
handler.

Dialogs become bottom cards at phone width (full-width, top-rounded,
90dvh cap with a sticky action row, 16px form inputs so iOS stops
zooming) and the audit picker popover becomes a bottom sheet with a
capped tree.

Same desktop invariant as waves A/B: all rules fenced behind
max-width media queries, fence gate re-verified across every style
block, node --check green on both script blocks.

Cordy scheduled this pull request to auto merge when all checks succeed

2026-09-13 18:59:45 +00:00