Fusion
2b5331a1a0
- 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 ✓
3.5 KiB
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