From 16d03421e834c72c6ac9e2b41649e97137375029 Mon Sep 17 00:00:00 2001 From: Konrad du Plessis Date: Mon, 20 Apr 2026 18:49:43 +0200 Subject: [PATCH] Fix modal z-index stacking issue caused by sidebar layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Move decorative gradient glows from ::before/::after pseudo-elements on .app-main to a separate .app-glow div. The pseudo-elements were creating a stacking context that trapped Bootstrap modals (z-index 1055) inside .app-main, while the backdrop (z-index 1050) was appended to — causing the backdrop to render on top of the modal content. Co-Authored-By: Claude Opus 4.6 --- core/templates/base.html | 3 +++ static/css/custom.css | 34 +++++++++++++++++----------------- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/core/templates/base.html b/core/templates/base.html index b81bcc7..0f22f0f 100644 --- a/core/templates/base.html +++ b/core/templates/base.html @@ -110,6 +110,9 @@
+ +
+
diff --git a/static/css/custom.css b/static/css/custom.css index 6456bdf..f905565 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -329,33 +329,36 @@ a:hover { min-height: 100vh; display: flex; flex-direction: column; - position: relative; + /* NO position/z-index here — avoids trapping Bootstrap modals in a stacking context */ } -/* Decorative gradient glow in top-right corner of content area */ -.app-main::before { - content: ''; +/* Decorative gradient glows — separate fixed element, not on .app-main */ +.app-glow { position: fixed; + inset: 0; + pointer-events: none; + z-index: 0; + overflow: hidden; +} + +.app-glow::before { + content: ''; + position: absolute; top: -200px; right: -100px; width: 600px; height: 600px; background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%); - pointer-events: none; - z-index: 0; } -/* Decorative gradient glow in bottom-left */ -.app-main::after { +.app-glow::after { content: ''; - position: fixed; + position: absolute; bottom: -300px; left: var(--sidebar-width); width: 500px; height: 500px; background: radial-gradient(ellipse, rgba(232, 133, 26, 0.06) 0%, transparent 70%); - pointer-events: none; - z-index: 0; } /* === TOP BAR (mobile) === */ @@ -418,17 +421,14 @@ a:hover { font-weight: 600; } -/* Main content inner — sits above the decorative gradients */ +/* Main content inner */ .app-content { - position: relative; - z-index: 1; flex-grow: 1; + /* NO position/z-index — lets Bootstrap modals escape to body-level stacking */ } /* Footer inside main content */ .app-footer { - position: relative; - z-index: 1; padding: 1.25rem 0; margin-top: auto; border-top: 1px solid var(--border-default); @@ -458,7 +458,7 @@ a:hover { } /* Decorative gradients on mobile are positioned differently */ - .app-main::after { + .app-glow::after { left: -100px; } }