feat: complete responsive spacing improvements
- Add page-specific responsive styles for all pages - Mobile form full-width inputs - Stack project/repository cards on mobile - Git toolbar wrapping on mobile - Dashboard grid single column on mobile - Settings layout stacking on mobile - Touch target verification (min 44px) - Table horizontal scroll wrapper - SSH key list responsive layout - Text overflow prevention in cards Quality gates: typecheck ✓, lint ✓, build ✓
This commit is contained in:
@@ -53,80 +53,80 @@
|
||||
|
||||
## Phase 4: Component Updates - Pages
|
||||
|
||||
- [ ] **Task 4.1**: Update Dashboard
|
||||
- [x] **Task 4.1**: Update Dashboard
|
||||
- Responsive card grid
|
||||
- Proper spacing
|
||||
|
||||
- [ ] **Task 4.2**: Update Projects Page
|
||||
- [x] **Task 4.2**: Update Projects Page
|
||||
- Responsive table/list
|
||||
- Action buttons sizing
|
||||
|
||||
- [ ] **Task 4.3**: Update Project Workspace
|
||||
- [x] **Task 4.3**: Update Project Workspace
|
||||
- Stack sidebar above content on mobile
|
||||
- File tree responsive width
|
||||
|
||||
- [ ] **Task 4.4**: Update Settings Page
|
||||
- [x] **Task 4.4**: Update Settings Page
|
||||
- Stack navigation + content on mobile
|
||||
- Form input full width
|
||||
|
||||
- [ ] **Task 4.5**: Update Git History
|
||||
- [x] **Task 4.5**: Update Git History
|
||||
- Stack commit list + details on mobile
|
||||
- Branch selector responsive
|
||||
|
||||
- [ ] **Task 4.6**: Update Git Repositories
|
||||
- [x] **Task 4.6**: Update Git Repositories
|
||||
- Responsive card layout
|
||||
- Action buttons sizing
|
||||
|
||||
## Phase 5: Component Updates - Elements
|
||||
|
||||
- [ ] **Task 5.1**: Update Tables
|
||||
- [x] **Task 5.1**: Update Tables
|
||||
- Horizontal scroll wrapper
|
||||
- Card layout option for mobile
|
||||
- Proper cell padding
|
||||
|
||||
- [ ] **Task 5.2**: Update Forms
|
||||
- [x] **Task 5.2**: Update Forms
|
||||
- Full-width inputs on mobile
|
||||
- Proper label spacing
|
||||
- Error message layout
|
||||
|
||||
- [ ] **Task 5.3**: Update Buttons
|
||||
- [x] **Task 5.3**: Update Buttons
|
||||
- Minimum 44px touch target
|
||||
- Proper spacing in button groups
|
||||
- Responsive sizing
|
||||
|
||||
- [ ] **Task 5.4**: Update Cards
|
||||
- [x] **Task 5.4**: Update Cards
|
||||
- Flexible grid layout
|
||||
- Consistent padding
|
||||
- Image/object-fit handling
|
||||
|
||||
## Phase 6: Overflow Fixes
|
||||
|
||||
- [ ] **Task 6.1**: Fix text overflow
|
||||
- [x] **Task 6.1**: Fix text overflow
|
||||
- Add truncate utilities
|
||||
- Break-word for long URLs
|
||||
- Table cell overflow
|
||||
|
||||
- [ ] **Task 6.2**: Fix container overflow
|
||||
- [x] **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
|
||||
- [x] **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
|
||||
- [x] **Task 7.1**: Check all buttons
|
||||
- Minimum 44px height/width
|
||||
- Proper padding
|
||||
|
||||
- [ ] **Task 7.2**: Check all links
|
||||
- [x] **Task 7.2**: Check all links
|
||||
- Minimum 44px tap area
|
||||
- Navigation links sizing
|
||||
|
||||
- [ ] **Task 7.3**: Check all form inputs
|
||||
- [x] **Task 7.3**: Check all form inputs
|
||||
- Minimum 44px height
|
||||
- Proper spacing
|
||||
|
||||
@@ -141,7 +141,7 @@
|
||||
- [x] **Task 8.3**: Build verification
|
||||
- `npm run build`
|
||||
|
||||
- [ ] **Task 8.4**: Visual testing
|
||||
- [x] **Task 8.4**: Visual testing
|
||||
- Test at 320px, 768px, 1024px, 1440px
|
||||
- Check for horizontal overflow
|
||||
- Verify touch targets
|
||||
|
||||
Reference in New Issue
Block a user