From 14d9ca0b41d00fbf7db3ee14e895ac4e90dccd88 Mon Sep 17 00:00:00 2001
From: megaproxy <megaproxy@gmail.com>
Date: Sat, 9 May 2026 15:51:38 +0100
Subject: [PATCH] Settings overlay: cover the widget cleanly (was rendering
 below content because of a stacking-context fix from theme atmosphere layer)

---
 src/components/Settings.svelte | 3 +--
 src/styles.css                 | 8 +++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Settings.svelte b/src/components/Settings.svelte
index 249bd40..a1700f0 100644
--- a/src/components/Settings.svelte
+++ b/src/components/Settings.svelte
@@ -224,8 +224,7 @@
   .overlay {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.55);
-    backdrop-filter: blur(6px);
+    background: var(--bg);
     display: flex;
     align-items: stretch;
     z-index: 10;
diff --git a/src/styles.css b/src/styles.css
index 79401f3..986d712 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -41,7 +41,10 @@ html, body {
 }
 
 /* Optional decorative atmosphere layer per theme — set --atmosphere
-   to a `background` value (e.g. a gradient + noise) to enable. */
+   to a `background` value (e.g. a gradient + noise) to enable.
+   z-index:-1 keeps it below all in-flow content WITHOUT having to
+   promote children to a stacking context (which would clobber the
+   Settings overlay's position: absolute). */
 #app::before {
   content: "";
   position: absolute;
@@ -50,9 +53,8 @@ html, body {
   background: var(--atmosphere, none);
   opacity: var(--atmosphere-opacity, 0);
   mix-blend-mode: var(--atmosphere-blend, normal);
-  z-index: 0;
+  z-index: -1;
 }
-#app > * { position: relative; z-index: 1; }
 
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }