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:
Fusion
2026-05-19 20:27:28 +02:00
parent e9e0e87013
commit c52367401b
2 changed files with 145 additions and 17 deletions
+128
View File
@@ -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;
}
}