From 348b003d6ed16c9d539ab6acb3a265ef39e58635 Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Tue, 14 Jul 2026 15:55:24 +0200
Subject: [PATCH] fix: restore responsive dashboard panel grid

---
 packages/tracker/meshnet_tracker/dashboard.html | 8 +++++++-
 tests/test_dashboard.py                         | 5 +++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/tracker/meshnet_tracker/dashboard.html b/packages/tracker/meshnet_tracker/dashboard.html
index 5c5a16e..8b9b94e 100644
--- a/packages/tracker/meshnet_tracker/dashboard.html
+++ b/packages/tracker/meshnet_tracker/dashboard.html
@@ -24,7 +24,7 @@
   header .meta { color:var(--dim); font-size:12px; }
   main { display:grid; grid-template-columns:1fr;
           gap:14px; padding:14px 20px; }
-  main > section { grid-column:1 / -1; width:100%; min-width:0; }
+  main > section { width:100%; min-width:0; }
   body.chat-tab-active main {
     flex:1; min-height:0; display:flex; flex-direction:column;
     padding:0; gap:0; overflow:hidden;
@@ -72,6 +72,12 @@
           background:transparent; color:var(--dim); padding:5px 0 8px; }
   .dashboard-tabs button.active { color:var(--accent); border-bottom-color:var(--accent); }
   .wide { grid-column:1 / -1; }
+  /* Compact status cards fan out on desktop; tables remain readable at half width. */
+  @media (min-width:900px) {
+    main { grid-template-columns:repeat(4,minmax(0,1fr)); }
+    main > section { grid-column:span 1; }
+    .wide { grid-column:span 2; }
+  }
   section[hidden] { display:none !important; }
   section.chat-section {
     padding:0; border:0; border-radius:0; background:var(--bg); min-height:0;
diff --git a/tests/test_dashboard.py b/tests/test_dashboard.py
index bb3873c..c379ec8 100644
--- a/tests/test_dashboard.py
+++ b/tests/test_dashboard.py
@@ -39,8 +39,9 @@ def test_dashboard_served_with_all_panels():
         assert "resolveModelGroup" in html
         assert "buildModelAliasMap" in html
         assert "modelAliasKey(raw)" in html
-        assert "main { display:grid; grid-template-columns:1fr;" in html
-        assert "main > section { grid-column:1 / -1; width:100%; min-width:0; }" in html
+        assert "@media (min-width:900px)" in html
+        assert "grid-template-columns:repeat(4,minmax(0,1fr));" in html
+        assert ".wide { grid-column:span 2; }" in html
         assert 'onclick="clearConsole()"' in html
         assert "let consoleClearedAt = 0;" in html
     finally: