Improve dashboard layout for wide screens

- Perf charts: 3 equal columns filling full width, single column on mobile
- Chart height increased from 60px to 100px
- Fix Chart.js canvas not shrinking with min-width: 0 and overflow: hidden

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-10 15:39:04 +03:00
parent 6349e91e0f
commit 3e7b64664a

View File

@@ -35,6 +35,7 @@
font-weight: 600; font-weight: 600;
} }
.dashboard-subsection { .dashboard-subsection {
margin-bottom: 10px; margin-bottom: 10px;
padding-left: 16px; padding-left: 16px;
@@ -328,20 +329,28 @@
.perf-charts-grid { .perf-charts-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(3, 1fr);
gap: 12px; gap: 12px;
} }
@media (max-width: 900px) {
.perf-charts-grid {
grid-template-columns: 1fr;
}
}
.perf-chart-card { .perf-chart-card {
background: var(--card-bg); background: var(--card-bg);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 6px; border-radius: 6px;
padding: 10px 12px; padding: 10px 12px;
min-width: 0;
overflow: hidden;
} }
.perf-chart-wrap { .perf-chart-wrap {
position: relative; position: relative;
height: 60px; height: 100px;
} }
.perf-chart-header { .perf-chart-header {