diff --git a/plugin-designs/plugin-studio/plugin-studio.vue b/plugin-designs/plugin-studio/plugin-studio.vue index 84961b822..49bc0ab38 100644 --- a/plugin-designs/plugin-studio/plugin-studio.vue +++ b/plugin-designs/plugin-studio/plugin-studio.vue @@ -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; }