# Responsive Spacing Improvements Specification

## Requirements

### Functional Requirements

1. **Spacing Scale**: Consistent 4px-based spacing system with 8 tokens
2. **Breakpoints**: Mobile-first breakpoints at 480px, 768px, 1024px, 1280px
3. **Fluid Typography**: Font sizes that scale with viewport using clamp()
4. **Responsive Tables**: Tables readable on mobile via horizontal scroll or card layout
5. **Dialog Sizing**: Viewport-aware dialog sizing with max constraints
6. **Touch Targets**: Minimum 44px for all interactive elements
7. **Text Truncation**: Proper ellipsis handling for overflow content
8. **No Horizontal Overflow**: Zero horizontal scroll on all pages at all breakpoints

### Non-Functional Requirements

1. **Performance**: No layout shift during responsive transitions
2. **Maintainability**: CSS custom properties for easy theming
3. **Accessibility**: Touch targets meet WCAG 2.5.5 (44x44px)
4. **Browser Support**: All modern browsers

## CSS Custom Properties

### Spacing
```css
:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-8: 3rem;     /* 48px */
  --space-10: 4rem;    /* 64px */
}
```

### Breakpoints
```css
:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}
```

### Fluid Typography
```css
:root {
  --font-size-xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);
  --font-size-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-base: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --font-size-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
}
```

## Component Updates Checklist

### Layout
- [ ] AppShell: Responsive navigation (hamburger menu on mobile)
- [ ] Container: Max-width + responsive padding
- [ ] PageHeader: Stack on mobile, row on desktop

### Pages
- [ ] Dashboard: Card grid responsive columns
- [ ] Projects: List/table responsive layout
- [ ] Project Workspace: Stack sidebar on mobile
- [ ] Settings: Stack nav + content on mobile
- [ ] Git History: Stack commit list + details on mobile

### Components
- [ ] Dialogs: Viewport-aware sizing
- [ ] Tables: Horizontal scroll or card layout
- [ ] Forms: Full-width inputs on mobile
- [ ] Buttons: Minimum touch target size
- [ ] Cards: Flexible grid layout

## Testing Requirements

1. **Viewport Testing**: Test at 320px, 375px, 414px, 768px, 1024px, 1440px
2. **Overflow Check**: No horizontal overflow at any breakpoint
3. **Touch Target Check**: All interactive elements ≥ 44px
4. **Visual Regression**: Screenshots before/after for key pages