Fusion
c795f8f873
Backend: - Create ToolInstance model with status tracking - Add Alembic migration for tool_instances table - Create Docker service for compose template rendering and container execution - Add CRUD API endpoints for tool instances - Add lifecycle endpoints (start/stop/restart) - Add user sessions endpoint for navigation - Register routers in main.py Frontend: - Create SessionsProvider with React context - Create sessions API client - Update AppShell with sessions section in navigation - Add session status indicators and polling - Add CSS for session navigation 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
|