egg/DashBoard
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(resource): use auto-fit grid for summary cards to follow sidebar toggle

Browse Source 
Summary grid used fixed 10-column layout with viewport-based media queries
that didn't account for sidebar width changes, causing overflow when sidebar
opened and blank space at certain breakpoints.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
egg
2026-02-23 19:04:55 +08:00
parent fd78c02b2d
commit 8694780abb
1 changed files with 1 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/resource-shared/styles.css
View File

@@ -136,7 +136,7 @@ body {
.summary-grid { .summary-grid {
display: grid; display: grid;
grid-template-columns: repeat(10, minmax(120px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px; gap: 10px;
} }
@@ -529,12 +529,6 @@ body {
margin-bottom: 12px; margin-bottom: 12px;
} }
@media (max-width: 1500px) {
.summary-grid {
grid-template-columns: repeat(5, minmax(120px, 1fr));
}
}
@media (max-width: 980px) { @media (max-width: 980px) {
.resource-page { .resource-page {
padding: 12px; padding: 12px;
@@ -543,10 +537,6 @@ body {
.header-gradient h1 { .header-gradient h1 {
font-size: 20px; font-size: 20px;
} }
.summary-grid {
grid-template-columns: repeat(3, minmax(110px, 1fr));
}
} }
/* ---- MultiSelect component ---- */ /* ---- MultiSelect component ---- */
@@ -662,10 +652,6 @@ body {
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.summary-grid {
grid-template-columns: repeat(2, minmax(100px, 1fr));
}
.matrix-table th:first-child, .matrix-table th:first-child,
.matrix-table td:first-child { .matrix-table td:first-child {
min-width: 220px; min-width: 220px;