From dcadd2ce43055f54b19483d9c1b71d1685727d6b Mon Sep 17 00:00:00 2001
From: Kevin Buffardi <kbuffardi@csuchico.edu>
Date: Thu, 8 Oct 2026 23:40:56 -0700
Subject: [PATCH 1/2] fix(ui): keep workspace colors accurate in settings

Make the settings click-outside layer transparent and remove its workspace-facing shadow so theme previews remain true to the active palette.
---
 scripts/e2e-settings-memory-debug.test.mjs | 12 ++++++++++++
 src/ui/styles.css                          |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/scripts/e2e-settings-memory-debug.test.mjs b/scripts/e2e-settings-memory-debug.test.mjs
index 21e4746..7cd4f06 100644
--- a/scripts/e2e-settings-memory-debug.test.mjs
+++ b/scripts/e2e-settings-memory-debug.test.mjs
@@ -161,3 +161,15 @@ test('Settings markup exposes the official UBSan help link in a protected new ta
   assert.match(html, /rel="noopener noreferrer"/);
   assert.doesNotMatch(html, /settings-save|Save settings|Apply settings/i);
 });
+
+test('Settings backdrop preserves accurate workspace theme previews', async () => {
+  const css = await readFile(new URL('../src/ui/styles.css', import.meta.url), 'utf8');
+  const backdrop = css.match(/\.settings-backdrop\s*\{([^}]*)\}/)?.[1];
+  const panel = css.match(/\.settings-panel\s*\{([^}]*)\}/)?.[1];
+
+  assert.ok(backdrop, 'Settings backdrop styles should exist for click-outside close');
+  assert.match(backdrop, /background:\s*transparent\s*;/);
+  assert.doesNotMatch(backdrop, /(?:opacity|filter|backdrop-filter)\s*:/);
+  assert.ok(panel, 'Settings drawer styles should exist');
+  assert.doesNotMatch(panel, /box-shadow\s*:/);
+});
diff --git a/src/ui/styles.css b/src/ui/styles.css
index 1cb177d..1f04161 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -176,7 +176,8 @@ select:focus {
   position: fixed;
   inset: var(--toolbar-h) 0 var(--statusbar-h) 0;
   z-index: 30;
-  background: rgb(17 17 27 / 55%);
+  /* Keep click-outside close without changing the colors being previewed. */
+  background: transparent;
 }
 
 .settings-panel {
@@ -190,7 +191,6 @@ select:focus {
   flex-direction: column;
   background: var(--mantle);
   border-left: 1px solid var(--surface1);
-  box-shadow: -8px 0 24px rgb(0 0 0 / 30%);
 }
 
 .settings-panel-header {

From 37e9f2d4a05576337b501db86be232868d7cb312 Mon Sep 17 00:00:00 2001
From: Kevin Buffardi <kbuffardi@csuchico.edu>
Date: Fri, 9 Oct 2026 04:01:12 -0700
Subject: [PATCH 2/2] test(browser): cover unfaded settings preview

Verify the live Settings flow keeps its click-outside target transparent and does not cast a shadow over workspace theme previews.
---
 scripts/smoke-browser.mjs | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/scripts/smoke-browser.mjs b/scripts/smoke-browser.mjs
index 5cb169c..ddb977a 100644
--- a/scripts/smoke-browser.mjs
+++ b/scripts/smoke-browser.mjs
@@ -828,16 +828,24 @@ int main() {
     const openPanel = await evaluate(cdp, sessionId, `(() => {
       document.getElementById('btn-settings').click();
       const panel = document.getElementById('settings-panel');
+      const backdrop = document.getElementById('settings-backdrop');
       const style = getComputedStyle(panel);
+      const backdropStyle = getComputedStyle(backdrop);
       return {
         hidden: panel.hidden,
         ariaHidden: panel.getAttribute('aria-hidden'),
         position: style.position,
         right: style.right,
+        boxShadow: style.boxShadow,
+        backdropHidden: backdrop.hidden,
+        backdropBackground: backdropStyle.backgroundColor,
       };
     })()`);
     assert(openPanel.hidden === false && openPanel.ariaHidden === 'false', 'Settings panel did not open');
     assert(openPanel.position === 'fixed' && openPanel.right === '0px', 'Settings panel is not a right-side drawer');
+    assert(openPanel.backdropHidden === false, 'Settings backdrop should remain available for click-outside close');
+    assert(openPanel.backdropBackground === 'rgba(0, 0, 0, 0)', 'Settings backdrop must not fade theme previews');
+    assert(openPanel.boxShadow === 'none', 'Settings panel must not cast a shadow over workspace previews');
 
     const toggleChecked = await evaluate(cdp, sessionId, `(() => {
       const toggle = document.getElementById('setting-memory-debug');