From dcadd2ce43055f54b19483d9c1b71d1685727d6b Mon Sep 17 00:00:00 2001 From: Kevin Buffardi Date: Thu, 8 Oct 2026 23:40:56 -0700 Subject: [PATCH 1/3] 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 Date: Fri, 9 Oct 2026 04:01:12 -0700 Subject: [PATCH 2/3] 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'); From d81d9ee5db44fc3bb6e2b373e28af836c214c8d7 Mon Sep 17 00:00:00 2001 From: Kevin Buffardi Date: Fri, 9 Oct 2026 10:02:49 -0700 Subject: [PATCH 3/3] chore(release): bump patch version to 0.5.1 Align the manifest, package metadata, and lockfile for the next patch release. --- manifest.json | 2 +- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/manifest.json b/manifest.json index 45240b7..fb5dd4d 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "name": "browser.cpp", "short_name": "browser.cpp", "description": "In-browser C++20 IDE powered by Monaco Editor and WASM Clang", - "version": "0.5.0", + "version": "0.5.1", "minimum_chrome_version": "105", "icons": { "16": "icons/icon16.png", diff --git a/package-lock.json b/package-lock.json index c03a077..71f2e0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "browser.cpp", - "version": "0.5.0", + "version": "0.5.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "browser.cpp", - "version": "0.5.0", + "version": "0.5.1", "dependencies": { "@xterm/addon-fit": "^0.11.0", "@xterm/addon-web-links": "^0.12.0", diff --git a/package.json b/package.json index ecc267b..9f0b581 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "browser.cpp", - "version": "0.5.0", + "version": "0.5.1", "description": "In-browser C++20 IDE with WASM Clang toolchain", "private": true, "scripts": {