doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mobile drawer: an open rail sits above the plugin's own layers
Some checks are pending
build-gate / build (push) Waiting to run
Details

Browse source 
On a phone, opening the studio's rail over the research dashboard left
the dashboard's filter row painted across the drawer. Mounted content
shares the drawer's stacking context, and the dashboard raises its
filter bar to z-index 55 while the drawer sat at 20.

While the drawer is open on a phone it now sits at z-index 1000: at
that moment it is the only thing you can use. Desktop and plugin modal
scrims keep their existing order. Checked at 390px on dashboard-plus-grid
in the studio: the drawer covers the dashboard completely. doxa-maps-spa
shares this layout and gets the same fix.
This commit is contained in:
doxa-maps-88655c70 2026-09-25 03:47:12 +00:00
parent 879f08ba08
commit d5c283f474
1 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
library/layouts/VerticalTabsLayout.vue
View file

@ -475,7 +475,12 @@ const VTL_SHADOW_CSS = `
drawer that slides in/out via transform (never a layout property), so opening/closing the drawer
never reflows the content. Content is full-width (left:0) and stays put; the drawer floats over it. */
.vtl-nav { z-index:20; width:256px; box-shadow:0 0 28px rgba(0,0,0,.55); transform:translateX(-100%); }
.vtl.nav-open .vtl-nav { transform:translateX(0); }
/* OPEN DRAWER ABOVE THE PLUGIN'S OWN LAYERS. Mounted content shares this stacking context, and
plugins raise their chrome (the research dashboard's filter bar is z-index:55), so at z-index 20
the open drawer had a plugin's filter row painted across it — measured 2026-09-25 at 390px.
Only while OPEN on a phone: that is when the drawer is the one thing you can use, and desktop
and plugin modal scrims keep their existing order. */
.vtl.nav-open .vtl-nav { transform:translateX(0); z-index:1000; }
.vtl-main { left:0; }
/* The desktop slim-rail collapse has no meaning on a phone — reconcileForWidth() clears railCollapsed
at this width, but neutralize its CSS too (belt-and-suspenders) so a full labelled drawer always
@ -921,7 +926,12 @@ export default defineComponent({
drawer that slides in/out via transform (never a layout property), so opening/closing the drawer
never reflows the content. Content is full-width (left:0) and stays put; the drawer floats over it. */
.vtl-nav { z-index:20; width:256px; box-shadow:0 0 28px rgba(0,0,0,.55); transform:translateX(-100%); }
.vtl.nav-open .vtl-nav { transform:translateX(0); }
/* OPEN DRAWER ABOVE THE PLUGIN'S OWN LAYERS. Mounted content shares this stacking context, and
plugins raise their chrome (the research dashboard's filter bar is z-index:55), so at z-index 20
the open drawer had a plugin's filter row painted across it — measured 2026-09-25 at 390px.
Only while OPEN on a phone: that is when the drawer is the one thing you can use, and desktop
and plugin modal scrims keep their existing order. */
.vtl.nav-open .vtl-nav { transform:translateX(0); z-index:1000; }
.vtl-main { left:0; }
/* The desktop slim-rail collapse has no meaning on a phone — reconcileForWidth() clears railCollapsed
at this width, but neutralize its CSS too (belt-and-suspenders) so a full labelled drawer always