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
29 lines
1.5 KiB
Markdown
29 lines
1.5 KiB
Markdown
# 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.
|