# Responsive Spacing Improvements - Tasks

## Phase 1: CSS Foundation

- [x] **Task 1.1**: Add spacing scale CSS custom properties
  - Add --space-1 through --space-10 to :root
  - Replace hardcoded padding/margin values with scale

- [x] **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

- [x] **Task 1.3**: Add fluid typography
  - Add --font-size-xs through --font-size-2xl
  - Update body and heading font sizes

## Phase 2: Layout Utilities

- [x] **Task 2.1**: Create Container utility
  - Max-width constraint
  - Responsive horizontal padding
  - Center alignment

- [x] **Task 2.2**: Create Stack utility
  - Vertical flex with gap
  - Size variants (sm, md, lg)

- [x] **Task 2.3**: Create Row utility
  - Horizontal flex with gap
  - Wrap support
  - Alignment options

- [x] **Task 2.4**: Create Grid utility
  - Responsive columns
  - Auto-fit with minmax
  - Gap support

## Phase 3: Component Updates - Layout

- [x] **Task 3.1**: Update AppShell
  - Mobile navigation (hamburger or bottom nav)
  - Responsive header layout
  - Collapsible sidebar

- [x] **Task 3.2**: Update PageHeader
  - Stack layout on mobile
  - Proper spacing

- [x] **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

- [x] **Task 8.1**: TypeScript checks
  - `npm run typecheck`

- [x] **Task 8.2**: Lint checks
  - `npm run lint`

- [x] **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