Developer
415aecc0dd
- Add dynamic viewport bounds and scrollable body regions to dialogs and modals\n- Make tool-launch popups use the shared scrollable body pattern\n- Keep mobile sheets, action sheets, and notification popups scroll-contained\n- Restore the ProjectsPage test setup required for the frontend suite\n\nOpenSpec: fix-dialog-scroll-containment\nQuality gates: npm run typecheck, npm run lint, npm test (88 passed), npm run build
1.5 KiB
1.5 KiB
Constrain and Scroll Edit Dialogs and Popups
Summary
Ensure every edit dialog, form popup, and modal popup remains usable on a viewport that is shorter than its content. Dialog chrome must stay within the visible viewport while the content area scrolls independently.
Problem
The shared dialog system constrains only components that follow its dialog-header / dialog-body structure. Several tool-launch and commit dialogs place form content directly inside the container or use a bespoke container, so long forms can be clipped. Existing viewport sizing also relies on vh, which is unreliable when mobile browser chrome changes height.
Scope
- Shared dialog and modal CSS in
apps/web/src/styles/global.css. - Mobile notification dropdown sizing in
apps/web/src/styles/utilities.css. - Tool-launch and commit popup markup that does not currently provide a scrollable content region.
Acceptance Criteria
- Dialogs and modal popups are bounded by the current visible viewport, including mobile dynamic viewport changes.
- Headers and footer/action bars remain visible while long form content scrolls independently.
- Tool-launch and commit popups use the shared scrollable content pattern.
- Mobile sheets, action sheets, and notification dropdowns remain scrollable without propagating scroll gestures to the page.
- Relevant frontend tests, typecheck, lint, and production build pass.
Non-Goals
- Redesigning dialog visuals or interaction flows.
- Changing page-level scrolling outside overlays.