admin/38686-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix modal z-index stacking issue caused by sidebar layout

Browse Source 
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 <body> —
causing the backdrop to render on top of the modal content.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Konrad du Plessis 2026-04-20 18:49:43 +02:00
parent 82c1906607
commit 16d03421e8
2 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
core/templates/base.html
View File

@ -110,6 +110,9 @@
<!-- === MAIN CONTENT AREA === --> <!-- === MAIN CONTENT AREA === -->
<div class="app-main"> <div class="app-main">
<!-- Decorative gradient glows (separate from app-main to avoid stacking context trapping modals) -->
<div class="app-glow d-print-none"></div>
<!-- === TOP BAR (mobile only, hidden on desktop via CSS) === --> <!-- === TOP BAR (mobile only, hidden on desktop via CSS) === -->
<div class="app-topbar d-print-none"> <div class="app-topbar d-print-none">
<a href="{% url 'home' %}" style="text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.2rem;"> <a href="{% url 'home' %}" style="text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.2rem;">

34
static/css/custom.css
View File

@ -329,33 +329,36 @@ a:hover {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; 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 */ /* Decorative gradient glows — separate fixed element, not on .app-main */
.app-main::before { .app-glow {
content: '';
position: fixed; position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.app-glow::before {
content: '';
position: absolute;
top: -200px; top: -200px;
right: -100px; right: -100px;
width: 600px; width: 600px;
height: 600px; height: 600px;
background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%); background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
} }
/* Decorative gradient glow in bottom-left */ .app-glow::after {
.app-main::after {
content: ''; content: '';
position: fixed; position: absolute;
bottom: -300px; bottom: -300px;
left: var(--sidebar-width); left: var(--sidebar-width);
width: 500px; width: 500px;
height: 500px; height: 500px;
background: radial-gradient(ellipse, rgba(232, 133, 26, 0.06) 0%, transparent 70%); background: radial-gradient(ellipse, rgba(232, 133, 26, 0.06) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
} }
/* === TOP BAR (mobile) === */ /* === TOP BAR (mobile) === */
@ -418,17 +421,14 @@ a:hover {
font-weight: 600; font-weight: 600;
} }
/* Main content inner — sits above the decorative gradients */ /* Main content inner */
.app-content { .app-content {
position: relative;
z-index: 1;
flex-grow: 1; flex-grow: 1;
/* NO position/z-index — lets Bootstrap modals escape to body-level stacking */
} }
/* Footer inside main content */ /* Footer inside main content */
.app-footer { .app-footer {
position: relative;
z-index: 1;
padding: 1.25rem 0; padding: 1.25rem 0;
margin-top: auto; margin-top: auto;
border-top: 1px solid var(--border-default); border-top: 1px solid var(--border-default);
@ -458,7 +458,7 @@ a:hover {
} }
/* Decorative gradients on mobile are positioned differently */ /* Decorative gradients on mobile are positioned differently */
.app-main::after { .app-glow::after {
left: -100px; left: -100px;
} }
} }