boban
/
clupilot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix desktop layout — replace CSS grid with padding-left offset (sidebar fixed) 

Bug: When .clu-sidebar uses position:fixed it's removed from grid flow,
so the only remaining grid child (main) gets auto-placed into column 1
(the 264px reserved column), making main render in a tiny strip with
sidebar floating on top — exactly what the user screenshot showed.

Fix: Drop grid-template-columns. Use .clu-app-grid { padding-left: 264px }
so the fixed sidebar sits in the reserved gutter and main becomes a
plain block that fills the remaining width.

Mobile (≤920px): padding-left reset to 0 since sidebar slides in as
overlay drawer instead of occupying space.
master
Boban Blaskovic 2026-06-01 00:09:59 +02:00
parent ae2b7c1169
commit 4be0ea7bae
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/resources/css/app.css
View File

@ -634,12 +634,13 @@
}
.clu-top-link a { color: var(--color-accent); font-weight: 600; }
/* ───── App layout (sidebar + main) ───── */
/* ───── App layout (sidebar fixed + main offset by padding) ───── */
.clu-app-grid {
display: grid;
grid-template-columns: 264px 1fr; /* 236 sidebar + 14 left margin + 14 gap */
position: relative;
min-height: 100vh;
padding-left: 264px; /* 14 left margin + 236 sidebar + 14 gap */
}
.clu-app-grid > main { display: block; }
/* Sidebar — TRUE fixed; never scrolls with main content. */
.clu-sidebar {
@ -677,7 +678,7 @@
.clu-burger.clu-icon-btn { display: none; }
@media (max-width: 920px) {
.clu-app-grid { grid-template-columns: 1fr; }
.clu-app-grid { padding-left: 0; }
.clu-sidebar {
position: fixed;
top: 0; left: 0;