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:
parent
db92d79d0a
commit
134b6e484e
1 changed files with 14 additions and 0 deletions
|
|
@ -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; }
|
||||
|
|
|
|||
Loading…
Reference in a new issue