alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix card grid layout on narrow viewports with tree sidebar

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-10 12:28:14 +03:00
parent b0a769b781
commit d8e73cb2b5
1 changed files with 13 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
server/src/wled_controller/static/css/tree-nav.css
View File

@@ -190,11 +190,23 @@
align-items: center; 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 ── */ /* ── Responsive: stack on narrow screens ── */
@media (max-width: 900px) { @media (max-width: 900px) {
.tree-layout { .tree-layout {
flex-direction: column; flex-direction: column;
align-items: stretch;
gap: 0; gap: 0;
} }
@@ -252,4 +264,5 @@
padding: 4px; padding: 4px;
margin-left: auto; margin-left: auto;
} }
} }