From 1b3751598dac9300fce3d0b225812f6c9554bf0c Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Wed, 22 Apr 2026 22:49:34 -0700
Subject: [PATCH] Stop sidebar nav items bleeding through the sticky header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sticky .sidebar-header had two layered issues that let nav items
show through it while the user scrolled the sidebar:

  - its background was a single linear-gradient of rgba() stops,
    starting at ~14% accent on transparent — the upper portion of the
    header was effectively translucent
  - .sidebar > * sets z-index 1 on every sidebar child, so the header
    and the nav buttons share a stacking level. Sticky alone doesn't
    lift the header; with equal z-index the nav wins on DOM order

Layer the existing accent gradient over a solid rgb(18, 18, 18) base
(visual unchanged, fully opaque), and bump the header to z-index 2 so
it paints above the nav buttons as they scroll under it.
---
 webui/static/style.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/webui/static/style.css b/webui/static/style.css
index 3c3932c4..d4b875bc 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -255,11 +255,15 @@ body {
 
 .sidebar-header {
     min-height: 115px;
-    background: linear-gradient(180deg,
+    /* Opaque base layered under the accent gradient so nav items scrolling
+       past the sticky header don't bleed through the translucent stops. */
+    background:
+        linear-gradient(180deg,
             rgba(var(--accent-rgb), 0.14) 0%,
             rgba(var(--accent-rgb), 0.08) 30%,
             rgba(var(--accent-rgb), 0.03) 70%,
-            rgba(18, 18, 18, 1) 100%);
+            rgba(18, 18, 18, 1) 100%),
+        rgb(18, 18, 18);
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     border-top-right-radius: 20px;
     padding: 20px 24px;
@@ -269,6 +273,10 @@ body {
     gap: 8px;
     position: sticky;
     top: 0;
+    /* Explicitly lift above the nav buttons. `.sidebar > *` sets z-index 1 on
+       every sidebar child, so without this the sticky header paints at the
+       same stacking level as the nav and loses to it on DOM order. */
+    z-index: 2;
     overflow: hidden;
     flex-shrink: 0;