From f3a2fe7a055ef6ade7204bb13f95add53d4fe996 Mon Sep 17 00:00:00 2001 From: Louis King Date: Sat, 4 Jul 2026 10:38:06 +0100 Subject: [PATCH] fix(web): 2x2 dashboard chart grid on mobile landscape Charts jumped from a single column straight to N-across at the md breakpoint, cramming them on landscape phones. Introduce a 2-column layout at the sm breakpoint (2x2 for 4 charts; 3 charts flow to 2-on-top + 1 bottom-left with a gap on the right) and defer the full N-across row to lg. Co-Authored-By: Claude Opus 4.8 --- src/meshcore_hub/web/static/js/spa/pages/dashboard.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/meshcore_hub/web/static/js/spa/pages/dashboard.js b/src/meshcore_hub/web/static/js/spa/pages/dashboard.js index 5e6110a..472a815 100644 --- a/src/meshcore_hub/web/static/js/spa/pages/dashboard.js +++ b/src/meshcore_hub/web/static/js/spa/pages/dashboard.js @@ -111,11 +111,11 @@ function renderChannelMessages(channelMessages, channelLabels) { `; } -/** Return a Tailwind grid-cols class for the given visible column count. */ +/** Return responsive Tailwind grid-cols classes for the given visible column count. */ function gridCols(count) { - if (count === 2) return 'md:grid-cols-2'; - if (count === 3) return 'md:grid-cols-3'; - if (count === 4) return 'md:grid-cols-4'; + if (count === 2) return 'sm:grid-cols-2'; + if (count === 3) return 'sm:grid-cols-2 lg:grid-cols-3'; + if (count === 4) return 'sm:grid-cols-2 lg:grid-cols-4'; return ''; }