# 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