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 ✓
148 lines
3.5 KiB
Markdown
148 lines
3.5 KiB
Markdown
# 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
|