feat: implement responsive spacing improvements

- Add CSS custom properties for spacing scale (4px base), breakpoints, and fluid typography
- Create layout utilities: Container, Stack, Row, Grid
- Update AppShell with responsive mobile navigation
- Update card grid with responsive columns
- Update dialogs with viewport-aware sizing and mobile fullscreen
- Update workspace layout for mobile stacking
- Ensure minimum 44px touch targets for buttons
- Add table-responsive and text truncation utilities
- Update page headers for mobile stacking

Quality gates: typecheck ✓, lint ✓, build ✓

openspec/changes/responsive-spacing-improvements/specs/spec.md

@@ -0,0 +1,87 @@
+# 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