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 ✓
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