feat: implement responsive spacing improvements
- Add CSS custom properties for spacing scale (4px base), breakpoints, and fluid typography - Create layout utilities: Container, Stack, Row, Grid - Update AppShell with responsive mobile navigation - Update card grid with responsive columns - Update dialogs with viewport-aware sizing and mobile fullscreen - Update workspace layout for mobile stacking - Ensure minimum 44px touch targets for buttons - Add table-responsive and text truncation utilities - Update page headers for mobile stacking Quality gates: typecheck ✓, lint ✓, build ✓
This commit is contained in:
Fusion
+294
-5
@@ -8,6 +8,30 @@
|
||||
--brand: #275d4b;
|
||||
--brand-strong: #154236;
|
||||
--border: #d8d0c5;
|
||||
|
||||
/* Spacing Scale (4px base) */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.5rem;
|
||||
--space-6: 2rem;
|
||||
--space-8: 3rem;
|
||||
--space-10: 4rem;
|
||||
|
||||
/* Breakpoints */
|
||||
--bp-sm: 480px;
|
||||
--bp-md: 768px;
|
||||
--bp-lg: 1024px;
|
||||
--bp-xl: 1280px;
|
||||
|
||||
/* Fluid Typography */
|
||||
--font-size-xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);
|
||||
--font-size-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
|
||||
--font-size-base: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
|
||||
--font-size-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
|
||||
--font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
|
||||
--font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
@@ -99,6 +123,36 @@ a {
|
||||
|
||||
.shell-content {
|
||||
padding: 1.25rem;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Responsive Shell */
|
||||
@media (max-width: 767px) {
|
||||
.shell-body {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
.shell-nav {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 0.5rem 0.75rem;
|
||||
white-space: nowrap;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.shell-content {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
.stack {
|
||||
@@ -113,8 +167,20 @@ a {
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.card-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.card-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
@@ -188,6 +254,15 @@ a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.project-list {
|
||||
@@ -256,9 +331,28 @@ a {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 1.25rem;
|
||||
min-width: 320px;
|
||||
max-width: 90vw;
|
||||
padding: var(--space-5);
|
||||
width: min(560px, 100vw - 2rem);
|
||||
max-height: min(800px, 100vh - 2rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dialog-lg {
|
||||
width: min(800px, 100vw - 2rem);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.dialog {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
border-radius: 0;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.dialog-overlay {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog h2 {
|
||||
@@ -795,6 +889,32 @@ a {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.workspace-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.workspace-sidebar {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
max-height: 40vh;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.workspace-header {
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
align-items: flex-start;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.workspace-header-actions {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
@@ -1796,3 +1916,172 @@ a .icon:last-child {
|
||||
.status-badge .icon {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Responsive Design System
|
||||
============================================ */
|
||||
|
||||
/* Layout Utilities */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: min(1200px, 100vw - 2rem);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
|
||||
.stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.stack-sm {
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.stack-md {
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.stack-lg {
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-4);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
|
||||
}
|
||||
|
||||
/* Text Utilities */
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.truncate-multiline {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.break-word {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
/* Touch Targets */
|
||||
.button,
|
||||
.nav-link,
|
||||
.icon-button,
|
||||
button,
|
||||
[role="button"] {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
/* Dialog Responsive */
|
||||
.dialog {
|
||||
width: min(560px, 100vw - 2rem);
|
||||
max-height: min(800px, 100vh - 2rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dialog-lg {
|
||||
width: min(800px, 100vw - 2rem);
|
||||
}
|
||||
|
||||
/* Table Responsive */
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.table-responsive table {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
/* Mobile-first Media Queries */
|
||||
@media (max-width: 767px) {
|
||||
/* Card layout for tables on mobile */
|
||||
.table-responsive thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table-responsive tbody tr {
|
||||
display: block;
|
||||
margin-bottom: var(--space-4);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.table-responsive td {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-2) 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.table-responsive td:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table-responsive td::before {
|
||||
content: attr(data-label);
|
||||
font-weight: 600;
|
||||
margin-right: var(--space-2);
|
||||
}
|
||||
|
||||
/* Larger touch targets on mobile */
|
||||
.button,
|
||||
button {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
/* Full-width inputs on mobile */
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices */
|
||||
@media (min-width: 480px) {
|
||||
.container {
|
||||
padding-inline: var(--space-5);
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium devices */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
padding-inline: var(--space-6);
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices */
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
padding-inline: var(--space-8);
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large devices */
|
||||
@media (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user