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 ✓
2026-05-19 19:50:36 +02:00
parent 6f41fa7cbe
commit 2b5331a1a0
11 changed files with 820 additions and 5 deletions
@@ -0,0 +1,147 @@
+# 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