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.3 KiB
2.3 KiB
Responsive Spacing Improvements
Problem
The current UI has several spacing and sizing issues that cause poor user experience:
- Overflow on small screens - Tables, dialogs, and workspace layouts don't adapt to mobile viewports
- Inconsistent spacing - Components use arbitrary padding/margin values without a consistent scale
- Fixed widths - Many components use fixed pixel widths that break on smaller screens
- Missing responsive breakpoints - Only 3 media queries exist for the entire application (860px, 1024px, 768px)
- Text truncation - Long content overflows containers without proper ellipsis handling
- Touch targets - Buttons and links are too small for mobile interaction (below 44px minimum)
Solution
Implement a comprehensive responsive design system with:
- Consistent spacing scale - Use CSS custom properties for padding/margin (4px base unit)
- Mobile-first breakpoints - Standard breakpoints at 480px, 768px, 1024px, 1280px
- Fluid layouts - Replace fixed widths with relative units (%, vw, clamp())
- Responsive tables - Horizontal scroll or card-based layout for tables on mobile
- Dialog sizing - Max-width constraints with viewport-relative sizing
- 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