# OpenSpec Tasks: Web UI Consolidation & Polish — Modals, Cards, Breakpoints

## Change
`web-ui-spacing-typography-rework` — Pass 3: Consolidation & Polish

## Parent Spec
`openspec/specs/web-ui-spacing-typography-rework-pass3.md`

## Status
tasks

---

## Implementation Tasks

- [x] 1. Unify modal/dialog system in `apps/web/src/styles/global.css`
  - Ensure `.dialog-overlay`, `.dialog`, `.dialog-lg`, `.dialog-header`, `.dialog-body`, `.dialog-footer`, `.dialog-actions`, `.dialog-close` are canonical
  - Add `.modal-overlay` and `.modal-content` as aliases/wrappers
  - Add mobile dialog slide-up behavior at `767px`

- [x] 2. Migrate at least two `.modal-*` callers to `.dialog-*`
  - Candidates: `components/features/tool/start-tool-modal.tsx`, `components/features/workspace/workspace-tools-panel.tsx`, `components/features/git/merge-dialog.tsx`, `pages/WorkspacesPage.tsx`, `pages/SessionsPage.tsx`, `components/features/tool/start-tool-fab.tsx`

- [x] 3. Consolidate card patterns in `apps/web/src/styles/global.css`
  - `.card`, `.card-sm`, `.card-md`, `.card-lg`, `.card-elevated`, `.card-borderless`

- [x] 4. Remove duplicated card rules from page CSS files
  - `styles/pages/workspaces.css`
  - `styles/pages/sessions.css`
  - `styles/pages/ssh-keys.css`
  - `styles/pages/workspace-detail.css`
  - `styles/pages/projects.css`
  - `styles/pages/git-history.css`

- [x] 5. Standardize breakpoints
  - Remove `860px` breakpoint from `global.css`
  - Make `global.css` line 779 use `767px` instead of `768px`
  - Ensure all `@media` queries use `480px`, `767px`, `768px`, `1024px`, or `1280px`
  - Prefer mobile-first `min-width: 768px` for refactored rules

- [x] 6. Add token documentation header to `apps/web/src/styles/tokens.css`

- [x] 7. Create `docs/development/ui-review-checklist.md`

- [x] 8. Verification
  - Run `cd apps/web && npm run typecheck`
  - Run `cd apps/web && npm run lint`
  - Search for `860px` in `apps/web/src`; confirm zero matches
  - Search for `.modal-overlay` / `.modal-content`; confirm they are aliases or have fewer direct callers
  - Open a dialog on desktop and mobile viewport and verify behavior
  - Confirm `tokens.css` documentation header exists
  - Confirm `docs/development/ui-review-checklist.md` exists

- [x] 9. Update OpenSpec artifacts
  - Mark tasks in `openspec/tasks/web-ui-spacing-typography-rework-pass3.md` complete
  - Add final report note

- [x] 10. Archive OpenSpec change
  - Move `openspec/proposals/`, `openspec/specs/`, `openspec/tasks/` files for this change to `openspec/changes/archive/web-ui-spacing-typography-rework/` (or current archive structure)
  - Update `progress.md` if applicable

---

## Acceptance Criteria

- All tasks above are completed.
- `npm run typecheck` passes.
- `npm run lint` passes.
- `.modal-overlay` and `.modal-content` are aliases/wrappers of `.dialog-*`.
- At least two `.modal-*` callers migrated to `.dialog-*`.
- `.card` family exists and is used by at least two page CSS files.
- `860px` breakpoint removed.
- `tokens.css` has documentation header.
- `docs/development/ui-review-checklist.md` exists.
- OpenSpec change archived.

---

## Notes

- Keep aliases for backward compatibility; do not delete `.modal-*` classes if other callers remain.
- Do not change behavior of dialogs; only visual unification.
- Do not remove page-specific layout grids; only remove duplicated card-like background/border/padding.
- Prefer one commit per major area (modals, cards, breakpoints, docs).
