diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css index 54700a6..1f79c24 100644 --- a/apps/web/src/styles.css +++ b/apps/web/src/styles.css @@ -2089,3 +2089,131 @@ button, max-width: 1200px; } } + +/* ============================================ + Page-Specific Responsive Styles + ============================================ */ + +/* Forms - Full width on mobile */ +@media (max-width: 767px) { + .form-field input, + .form-field textarea, + .form-field select { + width: 100%; + min-height: 44px; + } + + /* Settings page stack */ + .settings-layout { + flex-direction: column; + } + + .settings-nav { + flex-direction: row; + overflow-x: auto; + padding-bottom: var(--space-2); + } + + /* Project cards full width */ + .project-card { + flex-direction: column; + gap: var(--space-3); + } + + .project-actions { + width: 100%; + justify-content: flex-start; + } + + /* Repository cards */ + .repository-card { + flex-direction: column; + gap: var(--space-3); + align-items: flex-start; + } + + .repository-actions { + width: 100%; + justify-content: flex-start; + } + + /* Git toolbar wrap */ + .git-toolbar { + flex-wrap: wrap; + gap: var(--space-2); + } + + /* Dashboard cards */ + .dashboard-grid { + grid-template-columns: 1fr; + } + + /* Stack form actions */ + .form-actions { + flex-direction: column; + width: 100%; + } + + .form-actions button { + width: 100%; + justify-content: center; + } +} + +/* Ensure all pages have proper padding */ +.stack > h1, +.stack > h2 { + margin-top: 0; +} + +/* Touch target verification override */ +button, +[role="button"], +a.nav-item, +.tree-entry { + min-height: 44px; +} + +/* Table horizontal scroll wrapper */ +.table-wrapper { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + width: 100%; +} + +/* Dialog content spacing */ +.dialog-body { + padding: var(--space-4) 0; +} + +/* Prevent text overflow in cards */ +.card h3, +.card p { + overflow: hidden; + text-overflow: ellipsis; +} + +/* SSH keys table responsive */ +.ssh-key-list { + display: flex; + flex-direction: column; + gap: var(--space-3); +} + +.ssh-key-item { + display: flex; + flex-direction: column; + gap: var(--space-2); + padding: var(--space-4); + background: var(--bg); + border: 1px solid var(--border); + border-radius: 10px; +} + +@media (min-width: 768px) { + .ssh-key-item { + flex-direction: row; + justify-content: space-between; + align-items: center; + } +} diff --git a/openspec/changes/responsive-spacing-improvements/tasks.md b/openspec/changes/responsive-spacing-improvements/tasks.md index 19d78f8..4c01828 100644 --- a/openspec/changes/responsive-spacing-improvements/tasks.md +++ b/openspec/changes/responsive-spacing-improvements/tasks.md @@ -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