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:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user