From 3e7b64664aba43e83e361dd30a35389ac86cd376 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Tue, 10 Mar 2026 15:39:04 +0300
Subject: [PATCH] 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>
---
 server/src/wled_controller/static/css/dashboard.css | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/server/src/wled_controller/static/css/dashboard.css b/server/src/wled_controller/static/css/dashboard.css
index a9b6794..431a9b5 100644
--- a/server/src/wled_controller/static/css/dashboard.css
+++ b/server/src/wled_controller/static/css/dashboard.css
@@ -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 {