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 ✓
2.7 KiB
2.7 KiB
Responsive Spacing Improvements Specification
Requirements
Functional Requirements
- Spacing Scale: Consistent 4px-based spacing system with 8 tokens
- Breakpoints: Mobile-first breakpoints at 480px, 768px, 1024px, 1280px
- Fluid Typography: Font sizes that scale with viewport using clamp()
- Responsive Tables: Tables readable on mobile via horizontal scroll or card layout
- Dialog Sizing: Viewport-aware dialog sizing with max constraints
- Touch Targets: Minimum 44px for all interactive elements
- Text Truncation: Proper ellipsis handling for overflow content
- No Horizontal Overflow: Zero horizontal scroll on all pages at all breakpoints
Non-Functional Requirements
- Performance: No layout shift during responsive transitions
- Maintainability: CSS custom properties for easy theming
- Accessibility: Touch targets meet WCAG 2.5.5 (44x44px)
- Browser Support: All modern browsers
CSS Custom Properties
Spacing
: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
:root {
--bp-sm: 480px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
}
Fluid Typography
: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
- Viewport Testing: Test at 320px, 375px, 414px, 768px, 1024px, 1440px
- Overflow Check: No horizontal overflow at any breakpoint
- Touch Target Check: All interactive elements ≥ 44px
- Visual Regression: Screenshots before/after for key pages