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