From 4be0ea7baea3843902c5a7fe99b41c5dd5113099 Mon Sep 17 00:00:00 2001 From: Boban Blaskovic Date: Mon, 1 Jun 2026 00:09:59 +0200 Subject: [PATCH] =?UTF-8?q?Fix=20desktop=20layout=20=E2=80=94=20replace=20?= =?UTF-8?q?CSS=20grid=20with=20padding-left=20offset=20(sidebar=20fixed)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- app/resources/css/app.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/resources/css/app.css b/app/resources/css/app.css index af92cdb..867ee0c 100644 --- a/app/resources/css/app.css +++ b/app/resources/css/app.css @@ -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;