Files
headquarter/ui-rework-foundations-apply.md
T
Developer 6e419f815d feat(web/ui): consolidate dialogs, cards, and breakpoints (Pass 3)
- Unify modal/dialog system; .modal-* are now aliases of .dialog-*
- Migrate WorkspacesPage, start-tool-modal, merge-dialog, workspace-tools-panel to .dialog-*
- Add .card-sm/.card-md/.card-lg/.card-elevated/.card-borderless modifiers
- Apply card utilities across workspaces, projects, ssh-keys, workspace-detail, git-history
- Remove duplicated card-like background/border/padding from page CSS
- Remove 860px breakpoint; standardize on 767px/768px mobile split
- Add docs/development/ui-review-checklist.md
- Archive web-ui-spacing-typography-rework OpenSpec change
2026-06-16 15:27:45 +00:00

3.4 KiB

Implemented Pass 1 (Foundations) of the web UI spacing/typography/visual-rhythm rework.

Changed files:

  • apps/web/src/styles/tokens.css — expanded spacing, radius, line-height, shadow, layout, touch-target, sidebar-width, mobile-nav-height tokens; added documentation header.
  • apps/web/src/styles/global.css — added primitive classes: .btn/.btn-primary/.btn-secondary/.btn-sm/.btn-icon/.btn-danger, .link-button, .form-input/.form-textarea, .checkbox-label/.checkbox-label-compact, .hint, .form-error/.error-message, .alert/.alert-error/.alert-warning/.alert-info, .loading-state, .badge/.badge-success/.badge-secondary, .text-muted, .profile-avatar-section/.avatar-*, .mobile-detail-back, .button-secondary alias; added :focus-visible rings for .nav-item, .mobile-nav-item, .tab, .tree-entry, .btn, .form-input, .form-textarea, .link-button.
  • apps/web/src/styles/utilities.css — added .mobile-detail-* view classes, .mobile-list-search/.mobile-list-search-input, SSH key .key-signing/.key-verification/.signature-result/.verify-result, profile mobile avatar classes, replaced hard-coded 64px and 44px values with --mobile-nav-height/--touch-target, and removed a redundant .mobile-nav-item override.
  • apps/web/src/components/features/config-profiles/ConfigProfileListSidebar.tsx — replaced inline 0.7rem styles with .badge/.badge-secondary; added .delete-btn.
  • apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx — switched Discard button to .button-secondary alias.
  • apps/web/src/components/features/tool/instance-list.tsx — replaced inline checkbox styles with .checkbox-label-compact.
  • OpenSpec artifacts: openspec/proposals/web-ui-spacing-typography-rework.md, openspec/specs/web-ui-spacing-typography-rework.md, openspec/tasks/web-ui-spacing-typography-rework.md (tasks marked done).
  • ui-audit-spacing-typography.md audit report.

Commits (on feat/web-ui-foundations, merged into dev):

  1. feat(web/ui): expand design tokens and add primitive component styles
  2. feat(web/ui): add mobile detail/search, ssh/profile utilities and nav-height tokens
  3. feat(web/ui): replace inline font-size violations and use new primitives in components
  4. docs(openspec): add web ui spacing/typography proposal, spec, tasks and audit
  5. docs(openspec): mark pass 1 tasks complete

Validation:

  • npm run typecheck passes.
  • npm run lint passes.
  • npm run build passes (only pre-existing chunk-size warnings).
  • Class coverage check: 486 classes referenced across src/; only false-positive page lacks a rule. All audit-listed missing classes now have rules.
  • Spot-checked mobile detail view, SSH key signing/verification, profile avatar classes, and mobile nav/FAB height token usage — all present.

Open risk/question:

  • Push to origin dev is blocked by the runtime safety policy because the required override disables SSH host-key checking (StrictHostKeyChecking=no). The merge is complete locally and dev is ready.

Recommended next step:

  • Run the push from the parent session or approve the blocked command:
    cd /home/user/headquarter && GIT_SSH_COMMAND='ssh -i ~/.ssh/id_ed25519_headquarter -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -o IdentitiesOnly=yes' git push origin dev
    
  • After push, proceed to Pass 2 (Component Cleanup) or handle other requests.