headquarter/openspec/changes/responsive-spacing-improvements/tasks.md

Responsive Spacing Improvements - Tasks

Phase 1: CSS Foundation

• Task 1.1: Add spacing scale CSS custom properties

  • Add --space-1 through --space-10 to :root
  • Replace hardcoded padding/margin values with scale

• Task 1.2: Add breakpoint CSS custom properties

  • Add --bp-sm, --bp-md, --bp-lg, --bp-xl to :root
  • Update existing media queries to use variables

• Task 1.3: Add fluid typography

  • Add --font-size-xs through --font-size-2xl
  • Update body and heading font sizes

Phase 2: Layout Utilities

• Task 2.1: Create Container utility

  • Max-width constraint
  • Responsive horizontal padding
  • Center alignment

• Task 2.2: Create Stack utility

  • Vertical flex with gap
  • Size variants (sm, md, lg)

• Task 2.3: Create Row utility

  • Horizontal flex with gap
  • Wrap support
  • Alignment options

• Task 2.4: Create Grid utility

  • Responsive columns
  • Auto-fit with minmax
  • Gap support

Phase 3: Component Updates - Layout

• Task 3.1: Update AppShell

  • Mobile navigation (hamburger or bottom nav)
  • Responsive header layout
  • Collapsible sidebar

• Task 3.2: Update PageHeader

  • Stack layout on mobile
  • Proper spacing

• Task 3.3: Update Dialog

  • Viewport-aware max-width
  • Full-screen on mobile
  • Proper padding

Phase 4: Component Updates - Pages

• Task 4.1: Update Dashboard

  • Responsive card grid
  • Proper spacing

• Task 4.2: Update Projects Page

  • Responsive table/list
  • Action buttons sizing

• Task 4.3: Update Project Workspace

  • Stack sidebar above content on mobile
  • File tree responsive width

• Task 4.4: Update Settings Page

  • Stack navigation + content on mobile
  • Form input full width

• Task 4.5: Update Git History

  • Stack commit list + details on mobile
  • Branch selector responsive

• Task 4.6: Update Git Repositories

  • Responsive card layout
  • Action buttons sizing

Phase 5: Component Updates - Elements

• Task 5.1: Update Tables

  • Horizontal scroll wrapper
  • Card layout option for mobile
  • Proper cell padding

• Task 5.2: Update Forms

  • Full-width inputs on mobile
  • Proper label spacing
  • Error message layout

• Task 5.3: Update Buttons

  • Minimum 44px touch target
  • Proper spacing in button groups
  • Responsive sizing

• Task 5.4: Update Cards

  • Flexible grid layout
  • Consistent padding
  • Image/object-fit handling

Phase 6: Overflow Fixes

• Task 6.1: Fix text overflow

  • Add truncate utilities
  • Break-word for long URLs
  • Table cell overflow

• Task 6.2: Fix container overflow

  • Ensure all containers have max-width
  • Check flex/grid overflow
  • Add overflow-x: hidden where needed

• Task 6.3: Fix dialog overflow

  • Max-height with scroll
  • Viewport units
  • Mobile full-screen

Phase 7: Touch Targets

• Task 7.1: Check all buttons

  • Minimum 44px height/width
  • Proper padding

• Task 7.2: Check all links

  • Minimum 44px tap area
  • Navigation links sizing

• Task 7.3: Check all form inputs

  • Minimum 44px height
  • Proper spacing

Phase 8: Quality Gates

• Task 8.1: TypeScript checks

  • npm run typecheck

• Task 8.2: Lint checks

  • npm run lint

• Task 8.3: Build verification

  • npm run build

• Task 8.4: Visual testing

  • Test at 320px, 768px, 1024px, 1440px
  • Check for horizontal overflow
  • Verify touch targets