Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(topbar): don't push relatively-positioned sidebar/apps-layout when dev banner is on

Browse Source 
The previous commit added body.has-dev-banner shifts for .sidebar and
.apps-layout assuming they were position:fixed top:60 like the topbar.
They aren't — on desktop both sit in flex flow (.sidebar is
position:relative, .apps-layout is just a flex container), so
top:96px pushed the sidebar 96px down from its natural slot, leaving
a big visible gap above the category list.

Scope the sidebar nudge to the mobile media query where it actually
becomes fixed (also covers .sidebar-container, the unified apps
layout's mobile drawer). Replace the wrong .apps-layout top rule with
a height tweak — it sizes itself off (100vh - 60px) and was overflowing
the viewport by 36px when the banner was on; calc(100vh - 96px)
accounts for the banner.

Topbar shift (top:0 → 36) stays unchanged; that one was correct.

Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-27 20:44:34 +01:00
parent f7d7e21335
commit 00a76e86de
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
containers/libreportal/frontend/css/topbar.css
View File

@ -67,17 +67,20 @@
} }
body.has-dev-banner { padding-top: 96px; } body.has-dev-banner { padding-top: 96px; }
/* Shift every other fixed-positioned chrome element down by the banner /* Topbar is fixed top:0 on every viewport, so it always slides to top:36
height when it's on. Topbar slides from top:0 → 36 (under the banner); to sit below the banner. The viewport-fitted .apps-layout is in flex
anything that was at top:60 (the topbar's bottom edge — sidebar, apps flow but sizes itself off the topbar height — pull 36px more off so it
layout, mobile-drawer) slides to 96 to clear the now-pushed-down topbar. */ doesn't overflow the bottom when the banner is on. Everything else
that needs nudging (sidebar / sidebar-container / mobile-drawer) only
becomes fixed at mobile widths and is handled in the media query below. */
body.has-dev-banner .topbar { top: 36px; } body.has-dev-banner .topbar { top: 36px; }
body.has-dev-banner .sidebar { top: 96px; } body.has-dev-banner .apps-layout { height: calc(100vh - 96px); }
body.has-dev-banner .apps-layout { top: 96px; }
@media (max-width: 768px) { @media (max-width: 768px) {
.dev-banner { padding: 0 48px 0 12px; font-size: 0.8rem; } .dev-banner { padding: 0 48px 0 12px; font-size: 0.8rem; }
body.has-dev-banner .mobile-drawer { top: 96px; height: calc(100vh - 96px); } body.has-dev-banner .sidebar { top: 96px; }
body.has-dev-banner .sidebar-container { top: 96px; }
body.has-dev-banner .mobile-drawer { top: 96px; height: calc(100vh - 96px); }
} }
/* Topbar */ /* Topbar */