diff --git a/library/components/legends/LegendMobile.vue b/library/components/legends/LegendMobile.vue index 5e8334967..cd8c010e4 100644 --- a/library/components/legends/LegendMobile.vue +++ b/library/components/legends/LegendMobile.vue @@ -58,7 +58,19 @@ useShadowStyles(` single tight row, slightly reduced and translucent. The corners sit just above the sheet's collapsed strip (48px), so the watermark is always visible when the legend is closed; an opened sheet covers it. */ -.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{transform:translateY(calc(-1 * min(var(--legend-sheet-h,0px),48px)));} +/* ★ THE FAB SITS ON THE ATTRIBUTION TOO, not just the sheet (rega at 390x844, dx-life + /research: the gallery's 44px vtl-fab at (12,788) is topmost over Cities' bottom-left + attribution line "…oundaries · OpenFreeMap"). This rule already lifted the engine's bottom + corners clear of the legend SHEET; it never knew about the circle, which lives in the LAYOUT + outside every plugin's shadow root and therefore paints over plugin content at any internal + z-index. Attribution is a LICENCE TERM of the basemap, so a control covering it is not a + cosmetic overlap. + The lift is now the MAX of the two obstacles rather than the sheet alone: whichever is taller + decides, and neither is double-counted, because the fab and the sheet occupy the same corner. + Both are read from published variables — --legend-sheet-h (this component's own ResizeObserver) + and --map-fab-clearance (VerticalTabsLayout, set ONLY while the circle renders) — so a map with + no sheet and no fab still moves nothing. The 48px cap on the sheet term is kept as it was. */ +.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{transform:translateY(calc(-1 * max(min(var(--legend-sheet-h,0px),48px), var(--map-fab-clearance,0px))));} /* The scroll-edge gutters (the hoverable side strips, z-index 2) run the full height of the map and would otherwise swallow taps meant for the attribution in the corner: the corner controls sit one tier above them. (Moves to the shared z tiers with the token work.) */ diff --git a/library/components/maps/RegionCountryMap.vue b/library/components/maps/RegionCountryMap.vue index 49a8f6915..4e5fe9a2d 100644 --- a/library/components/maps/RegionCountryMap.vue +++ b/library/components/maps/RegionCountryMap.vue @@ -839,6 +839,25 @@ useShadowStyles( '.mapboxgl-ctrl-top-right,.maplibregl-ctrl-top-right,' + '.mapboxgl-ctrl-bottom-left,.maplibregl-ctrl-bottom-left,' + '.mapboxgl-ctrl-bottom-right,.maplibregl-ctrl-bottom-right{ z-index:3; }' + + // ★ LIFT THE BOTTOM CHROME CLEAR OF THE GALLERY'S VIEW-LIST CIRCLE (rega at 390x844 on + // dx-life /research). The circle is button.vtl-fab, 44x44 at (12,788), and it lives in + // VerticalTabsLayout — OUTSIDE this shadow root — so it paints over this map's chrome at any + // z-index we set here; the two are different stacking contexts, which is why the z-index:3 + // above cannot help. MEASURED: the attribution is details.maplibregl-ctrl-attrib in the + // BOTTOM-RIGHT container, expanded to 347x44 at (22,791) — nearly the full map width at 390 — + // so its LEFT END runs under the circle (1,394 px² overlap). Attribution is a LICENCE TERM of + // the basemap, not chrome we may cover. + // BOTH corners are lifted, because at this width the right container spans the map and the left + // one is empty (0x0) — lifting only the left would have fixed nothing here. + // --map-fab-clearance is published by the layout ONLY while the circle renders, and custom + // properties inherit through the flattened tree, so a standalone leaf or a + // with no gallery around it reads the 0px fallback and nothing moves. This component loads no + // LegendMobile, which is where the same lift lives for the other four production maps. + '@media (max-width: 767px){' + + ' .mapboxgl-ctrl-bottom-left,.maplibregl-ctrl-bottom-left,' + + ' .mapboxgl-ctrl-bottom-right,.maplibregl-ctrl-bottom-right{' + + ' transform:translateY(calc(-1 * var(--map-fab-clearance, 0px))); }' + + '}' + // ★ THEIR GLOBAL BOX-SIZING RESET, which no scoped style could ever have shown me. // app/assets/styles/base/_reset.scss:3-8 is `*, *::before, *::after { box-sizing: border-box }` // (a piccalil.li reset) and it applies to every element on their page, the legend swatch diff --git a/plugin-designs/doxa-maps-spa/doxa-maps-spa.vue b/plugin-designs/doxa-maps-spa/doxa-maps-spa.vue index 5b2164381..012334db7 100644 --- a/plugin-designs/doxa-maps-spa/doxa-maps-spa.vue +++ b/plugin-designs/doxa-maps-spa/doxa-maps-spa.vue @@ -126,6 +126,7 @@ dropped the OLDEST one and an already-visited tab went blank with NO error. -->
@@ -173,12 +174,26 @@ + + + - + - + - +