Plugin Studio: the header's menus stay on top of every plugin

Driver, 2026-09-25: "the Mapbox token menu is not z-index on top … it is underlapping the plugins". The
header row and the pane area were siblings with no stacking context of their own, so a menu at z-index 30
lost to plugin chrome (a filter bar at 55, a drawer at 1000). The header now stacks above the content and
the pane area is isolated (isolation:isolate), so no plugin's z-index can rise over the studio's header.
Measured in a browser with a plugin open: the Settings panel and the engine menu are the topmost element at
3 of 3 sampled points.
This commit is contained in:
doxa-maps-88655c70 2026-09-25 20:44:24 +00:00
parent db92d79d0a
commit 134b6e484e

View file

@ -223,6 +223,13 @@ const PS_SHADOW_CSS = `
.ps-logo { display:inline-flex; align-items:center; }
.ps-logo svg { display:block; }
.ps-count { color:#6d766e; }
/* THE HEADER'S MENUS SIT ABOVE EVERY PLUGIN (Driver, 2026-09-25: "the Mapbox token menu is not on top …
it is underlapping the plugins"). The header row and the pane area are siblings with no stacking context
of their own, so a menu at z-index 30 competed with each plugin's own chrome (a filter bar at 55, a drawer
at 1000) and lost. The header now stacks above the content, and the pane area is ISOLATED: whatever
z-index a plugin uses stays inside its pane. */
.vtl-top { position:relative; z-index:3; }
.vtl-body { isolation:isolate; }
.ps-token { position:relative; display:inline-flex; }
.ps-token-dot { width:8px; height:8px; border-radius:50%; background:#b8bdb4; }
.ps-token-dot.is-yours, .ps-token-dot.is-url { background:#92b195; }
@ -1058,6 +1065,13 @@ export default defineComponent({
.ps-logo { display: inline-flex; align-items: center; }
.ps-logo svg { display: block; }
.ps-count { color: #6d766e; }
/* THE HEADER'S MENUS SIT ABOVE EVERY PLUGIN (Driver, 2026-09-25: "the Mapbox token menu is not on top …
it is underlapping the plugins"). The header row and the pane area are siblings with no stacking context
of their own, so a menu at z-index 30 competed with each plugin's own chrome (a filter bar at 55, a drawer
at 1000) and lost. The header now stacks above the content, and the pane area is ISOLATED: whatever
z-index a plugin uses stays inside its pane. */
.vtl-top { position:relative; z-index:3; }
.vtl-body { isolation:isolate; }
.ps-token { position:relative; display:inline-flex; }
.ps-token-dot { width:8px; height:8px; border-radius:50%; background:#b8bdb4; }
.ps-token-dot.is-yours, .ps-token-dot.is-url { background:#92b195; }