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;
|
||||
}
|
||||
|
||||
|
||||
.dashboard-subsection {
|
||||
margin-bottom: 10px;
|
||||
padding-left: 16px;
|
||||
@@ -328,20 +329,28 @@
|
||||
|
||||
.perf-charts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.perf-charts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.perf-chart-card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.perf-chart-wrap {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.perf-chart-header {
|
||||
|
||||
Reference in New Issue
Block a user