diff --git a/src/session-sidebar-provider.ts b/src/session-sidebar-provider.ts index e2aa5fe..9a31c9f 100644 --- a/src/session-sidebar-provider.ts +++ b/src/session-sidebar-provider.ts @@ -729,7 +729,12 @@ export class PiSessionSidebarProvider implements vscode.WebviewViewProvider { padding: 4px; border: 1px solid var(--pi-border); border-radius: 4px; - background: var(--pi-panel); + /* Widget background keeps the menu readable on top of long session + lists; sideBarSectionHeader-background is transparent in several + themes. The color-mix layer adds a slight translucency so the + covered rows stay faintly visible through the backdrop. */ + background: var(--vscode-editorWidget-background, var(--pi-bg)); + background: color-mix(in srgb, var(--pi-bg) 94%, transparent); box-shadow: 0 6px 18px rgb(0 0 0 / 28%); } .session-menu.context-positioned { diff --git a/src/test/session-menu-backdrop.test.ts b/src/test/session-menu-backdrop.test.ts new file mode 100644 index 0000000..51c492a --- /dev/null +++ b/src/test/session-menu-backdrop.test.ts @@ -0,0 +1,38 @@ +import * as assert from "node:assert"; +import { readFileSync } from "node:fs"; + +const source = readFileSync( + new URL("../../src/session-sidebar-provider.ts", import.meta.url), + "utf8", +); + +function menuRule(): string { + const start = source.indexOf(".session-menu {\n"); + assert.ok(start >= 0, ".session-menu rule not found"); + const end = source.indexOf("\n }", start); + assert.ok(end > start, ".session-menu rule has no closing brace"); + return source.slice(start, end + 6); +} + +suite("Session action menu backdrop", () => { + test("gives the menu a non-transparent theme-aware background", () => { + const menu = menuRule(); + assert.match( + menu, + /background: var\(--vscode-editorWidget-background, var\(--pi-bg\)\);/, + "expected an opaque widget-background fallback", + ); + assert.match( + menu, + /background: color-mix\(in srgb, var\(--pi-bg\) 94%, transparent\);/, + "expected a near-opaque color-mix backdrop", + ); + assert.doesNotMatch(menu, /var\(--pi-panel\)/, "must not rely on the possibly-transparent section-header token"); + }); + + test("keeps the elevated shadow and border", () => { + const menu = menuRule(); + assert.match(menu, /border: 1px solid var\(--pi-border\)/); + assert.match(menu, /box-shadow: 0 6px 18px rgb\(0 0 0 \/ 28%\)/); + }); +});