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 ✓
3.5 KiB
Responsive Spacing Improvements - Tasks
Phase 1: CSS Foundation
-
Task 1.1: Add spacing scale CSS custom properties
- Add --space-1 through --space-10 to :root
- Replace hardcoded padding/margin values with scale
-
Task 1.2: Add breakpoint CSS custom properties
- Add --bp-sm, --bp-md, --bp-lg, --bp-xl to :root
- Update existing media queries to use variables
-
Task 1.3: Add fluid typography
- Add --font-size-xs through --font-size-2xl
- Update body and heading font sizes
Phase 2: Layout Utilities
-
Task 2.1: Create Container utility
- Max-width constraint
- Responsive horizontal padding
- Center alignment
-
Task 2.2: Create Stack utility
- Vertical flex with gap
- Size variants (sm, md, lg)
-
Task 2.3: Create Row utility
- Horizontal flex with gap
- Wrap support
- Alignment options
-
Task 2.4: Create Grid utility
- Responsive columns
- Auto-fit with minmax
- Gap support
Phase 3: Component Updates - Layout
-
Task 3.1: Update AppShell
- Mobile navigation (hamburger or bottom nav)
- Responsive header layout
- Collapsible sidebar
-
Task 3.2: Update PageHeader
- Stack layout on mobile
- Proper spacing
-
Task 3.3: Update Dialog
- Viewport-aware max-width
- Full-screen on mobile
- Proper padding
Phase 4: Component Updates - Pages
-
Task 4.1: Update Dashboard
- Responsive card grid
- Proper spacing
-
Task 4.2: Update Projects Page
- Responsive table/list
- Action buttons sizing
-
Task 4.3: Update Project Workspace
- Stack sidebar above content on mobile
- File tree responsive width
-
Task 4.4: Update Settings Page
- Stack navigation + content on mobile
- Form input full width
-
Task 4.5: Update Git History
- Stack commit list + details on mobile
- Branch selector responsive
-
Task 4.6: Update Git Repositories
- Responsive card layout
- Action buttons sizing
Phase 5: Component Updates - Elements
-
Task 5.1: Update Tables
- Horizontal scroll wrapper
- Card layout option for mobile
- Proper cell padding
-
Task 5.2: Update Forms
- Full-width inputs on mobile
- Proper label spacing
- Error message layout
-
Task 5.3: Update Buttons
- Minimum 44px touch target
- Proper spacing in button groups
- Responsive sizing
-
Task 5.4: Update Cards
- Flexible grid layout
- Consistent padding
- Image/object-fit handling
Phase 6: Overflow Fixes
-
Task 6.1: Fix text overflow
- Add truncate utilities
- Break-word for long URLs
- Table cell overflow
-
Task 6.2: Fix container overflow
- Ensure all containers have max-width
- Check flex/grid overflow
- Add overflow-x: hidden where needed
-
Task 6.3: Fix dialog overflow
- Max-height with scroll
- Viewport units
- Mobile full-screen
Phase 7: Touch Targets
-
Task 7.1: Check all buttons
- Minimum 44px height/width
- Proper padding
-
Task 7.2: Check all links
- Minimum 44px tap area
- Navigation links sizing
-
Task 7.3: Check all form inputs
- Minimum 44px height
- Proper spacing
Phase 8: Quality Gates
-
Task 8.1: TypeScript checks
npm run typecheck
-
Task 8.2: Lint checks
npm run lint
-
Task 8.3: Build verification
npm run build
-
Task 8.4: Visual testing
- Test at 320px, 768px, 1024px, 1440px
- Check for horizontal overflow
- Verify touch targets