From fa751e6cffb2a8ac4eb91fae64fa8b2664d0b296 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Wed, 27 May 2026 20:23:30 +0100
Subject: [PATCH] ui(topbar): dev-mode banner sits above the topbar, not under
 it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Banner was fixed at top: 60px (just below the 60px-tall topbar) at
z-index 999 — same vertical band as the sidebar (top: 60px, z-index
100) and the apps-layout subnav, so it covered the top 36px of both
when dev mode was on.

Moved to top: 0, z-index 1001 (above the topbar). When the banner is
visible, body.has-dev-banner now also shifts every other fixed-
positioned chrome element down by the banner's 36px:

  .topbar       0  → 36
  .sidebar     60  → 96
  .apps-layout 60  → 96
  .mobile-drawer 60 → 96   (already had this override)

Body padding-top stays at 96px (banner + topbar) — content offset is
unchanged. Standard environment-banner placement (Stripe test-mode,
GitHub staff-mode) and makes "you're in dev mode" actually visible
above your nav.

Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../libreportal/frontend/css/topbar.css       | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/containers/libreportal/frontend/css/topbar.css b/containers/libreportal/frontend/css/topbar.css
index 71f07f7..12812e4 100644
--- a/containers/libreportal/frontend/css/topbar.css
+++ b/containers/libreportal/frontend/css/topbar.css
@@ -2,17 +2,21 @@
 
 /* Topbar layout, nav pills, donate/logout buttons. Extracted from style.css. Theme via var(--*) tokens. */
 
-/* Developer-mode strip — sits flush under the fixed topbar when CFG_DEV_MODE
-   is on. Neutral glass so it reads as "system bar" not "warning"; only the
-   icon picks up the theme accent. Body gets .has-dev-banner to bump
-   padding-top by the strip's height; dismissal is local and remembered in
+/* Developer-mode strip — sits flush at the very top of the viewport above
+   the topbar when CFG_DEV_MODE is on. Above-chrome is the standard env-
+   banner placement (Stripe test-mode, GitHub staff-mode); pushing the
+   topbar down 36px is a deliberate signal that the environment is non-
+   standard. Neutral glass so it reads as "system bar" not "warning"; only
+   the icon picks up the theme accent. Body gets .has-dev-banner to bump
+   padding-top + shift every other fixed-positioned chrome element down
+   by the strip's height. Dismissal is local and remembered in
    localStorage until dev mode is toggled off + on again. */
 .dev-banner {
   position: fixed;
-  top: 60px;
+  top: 0;
   left: 0;
   right: 0;
-  z-index: 999;
+  z-index: 1001;
   height: 36px;
   display: flex;
   align-items: center;
@@ -63,6 +67,13 @@
 }
 
 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. */
+body.has-dev-banner .topbar       { top: 36px; }
+body.has-dev-banner .sidebar      { top: 96px; }
+body.has-dev-banner .apps-layout  { top: 96px; }
 
 @media (max-width: 768px) {
   .dev-banner { padding: 0 48px 0 12px; font-size: 0.8rem; }