fix: constrain dialog content to the viewport
- 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
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
# 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.
|
||||
@@ -0,0 +1,8 @@
|
||||
# Constrain and Scroll Edit Dialogs and Popups — Tasks
|
||||
|
||||
- [x] Audit all dialog, modal, sheet, action-sheet, and popup implementations.
|
||||
- [x] Strengthen shared dialog/modal viewport and body scrolling rules.
|
||||
- [x] Update bespoke tool-launch and commit popups to use scrollable content regions.
|
||||
- [x] Add focused coverage for the shared scrollable dialog-body markup.
|
||||
- [x] Run frontend typecheck, lint, tests (88 passed), and production build.
|
||||
- [x] Update project maps for changed source files.
|
||||
Reference in New Issue
Block a user