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 ✓
88 lines
2.7 KiB
Markdown
88 lines
2.7 KiB
Markdown
# 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
|