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 ✓
63 lines
2.3 KiB
Markdown
63 lines
2.3 KiB
Markdown
# Responsive Spacing Improvements
|
|
|
|
## Problem
|
|
|
|
The current UI has several spacing and sizing issues that cause poor user experience:
|
|
|
|
1. **Overflow on small screens** - Tables, dialogs, and workspace layouts don't adapt to mobile viewports
|
|
2. **Inconsistent spacing** - Components use arbitrary padding/margin values without a consistent scale
|
|
3. **Fixed widths** - Many components use fixed pixel widths that break on smaller screens
|
|
4. **Missing responsive breakpoints** - Only 3 media queries exist for the entire application (860px, 1024px, 768px)
|
|
5. **Text truncation** - Long content overflows containers without proper ellipsis handling
|
|
6. **Touch targets** - Buttons and links are too small for mobile interaction (below 44px minimum)
|
|
|
|
## Solution
|
|
|
|
Implement a comprehensive responsive design system with:
|
|
|
|
1. **Consistent spacing scale** - Use CSS custom properties for padding/margin (4px base unit)
|
|
2. **Mobile-first breakpoints** - Standard breakpoints at 480px, 768px, 1024px, 1280px
|
|
3. **Fluid layouts** - Replace fixed widths with relative units (%, vw, clamp())
|
|
4. **Responsive tables** - Horizontal scroll or card-based layout for tables on mobile
|
|
5. **Dialog sizing** - Max-width constraints with viewport-relative sizing
|
|
6. **Touch-friendly targets** - Minimum 44px touch targets for all interactive elements
|
|
|
|
## Key Features
|
|
|
|
### Spacing Scale
|
|
```
|
|
--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)
|
|
```
|
|
|
|
### Breakpoint System
|
|
```
|
|
sm: 480px - Mobile landscape
|
|
md: 768px - Tablet
|
|
lg: 1024px - Desktop
|
|
xl: 1280px - Large desktop
|
|
```
|
|
|
|
### Fluid Typography
|
|
```
|
|
--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);
|
|
```
|
|
|
|
## Success Criteria
|
|
|
|
- [ ] All pages display correctly on screens from 320px to 2560px
|
|
- [ ] No horizontal overflow on any page at any breakpoint
|
|
- [ ] All interactive elements have minimum 44px touch target
|
|
- [ ] Consistent spacing using CSS custom properties
|
|
- [ ] Tables are readable on mobile (horizontal scroll or card layout)
|
|
- [ ] Dialogs fit within viewport with proper padding
|