From d8e73cb2b5bb55ae5f3536442eb8206287f679a4 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Tue, 10 Mar 2026 12:28:14 +0300 Subject: [PATCH] Fix card grid layout on narrow viewports with tree sidebar The tree-layout used align-items: flex-start for the desktop sidebar, but when switching to column direction at <900px this prevented children from stretching to full width. Add align-items: stretch in the media query and lower grid minmax values so cards use 2+ columns. Co-Authored-By: Claude Opus 4.6 --- server/src/wled_controller/static/css/tree-nav.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/server/src/wled_controller/static/css/tree-nav.css b/server/src/wled_controller/static/css/tree-nav.css index 8b1abb0..a2a9725 100644 --- a/server/src/wled_controller/static/css/tree-nav.css +++ b/server/src/wled_controller/static/css/tree-nav.css @@ -190,11 +190,23 @@ align-items: center; } +/* ── Sidebar eats into card space — allow 2-col with smaller minmax ── */ + +.tree-content .displays-grid, +.tree-content .devices-grid { + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); +} + +.tree-content .templates-grid { + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); +} + /* ── Responsive: stack on narrow screens ── */ @media (max-width: 900px) { .tree-layout { flex-direction: column; + align-items: stretch; gap: 0; } @@ -252,4 +264,5 @@ padding: 4px; margin-left: auto; } + }