diff --git a/containers/libreportal/frontend/css/topbar.css b/containers/libreportal/frontend/css/topbar.css
index 12812e4..011bf1a 100644
--- a/containers/libreportal/frontend/css/topbar.css
+++ b/containers/libreportal/frontend/css/topbar.css
@@ -67,17 +67,20 @@
 }
 
 body.has-dev-banner { padding-top: 96px; }
-/* Shift every other fixed-positioned chrome element down by the banner
-   height when it's on. Topbar slides from top:0 → 36 (under the banner);
-   anything that was at top:60 (the topbar's bottom edge — sidebar, apps
-   layout, mobile-drawer) slides to 96 to clear the now-pushed-down topbar. */
+/* Topbar is fixed top:0 on every viewport, so it always slides to top:36
+   to sit below the banner. The viewport-fitted .apps-layout is in flex
+   flow but sizes itself off the topbar height — pull 36px more off so it
+   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 .sidebar      { top: 96px; }
-body.has-dev-banner .apps-layout  { top: 96px; }
+body.has-dev-banner .apps-layout  { height: calc(100vh - 96px); }
 
 @media (max-width: 768px) {
   .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 */