From dc6bde1fe313b01e667e1d69cd4d45990f53a880 Mon Sep 17 00:00:00 2001 From: swift-river542 Date: Wed, 16 Sep 2026 22:07:36 -0500 Subject: [PATCH] Phones: people-group image back to 16px above the sheet; scroll gutters exactly as wide as the control column --- app-profiles/doxa-research-map/research-map.vue | 3 ++- app-profiles/doxa-simple-map/doxa-simple-map.vue | 3 ++- library/components/legends/LegendMobile.vue | 7 +++---- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/app-profiles/doxa-research-map/research-map.vue b/app-profiles/doxa-research-map/research-map.vue index dd7962d7e..81c29752a 100644 --- a/app-profiles/doxa-research-map/research-map.vue +++ b/app-profiles/doxa-research-map/research-map.vue @@ -338,7 +338,8 @@ useShadowStyles(` .rm-legend-mobile-slot { display:block; } .rm-legend-desktop-slot { display:none; } } - .map-scroll-edge { position:absolute;top:0;bottom:0;width:40px;z-index:2;touch-action:pan-y;pointer-events:auto;background:transparent; } + /* Exactly as wide as the control column: button + its 3px edge margin on both sides. */ + .map-scroll-edge { position:absolute;top:0;bottom:0;width:calc(var(--map-btn-size,32px) + 6px);z-index:2;touch-action:pan-y;pointer-events:auto;background:transparent; } .map-scroll-edge--left { left:0; } .map-scroll-edge--right { right:0; } `, 'research-map') diff --git a/app-profiles/doxa-simple-map/doxa-simple-map.vue b/app-profiles/doxa-simple-map/doxa-simple-map.vue index a0af72ef9..9c20790c8 100644 --- a/app-profiles/doxa-simple-map/doxa-simple-map.vue +++ b/app-profiles/doxa-simple-map/doxa-simple-map.vue @@ -166,7 +166,8 @@ useShadowStyles(` } /* Left/right scroll edges for mobile — transparent strips that allow page scrolling via touch-action:pan-y on the map edges. */ - .map-scroll-edge { position:absolute;top:0;bottom:0;width:40px;z-index:2;touch-action:pan-y;pointer-events:auto;background:transparent; } + /* Exactly as wide as the control column: button + its 3px edge margin on both sides. */ + .map-scroll-edge { position:absolute;top:0;bottom:0;width:calc(var(--map-btn-size,32px) + 6px);z-index:2;touch-action:pan-y;pointer-events:auto;background:transparent; } .map-scroll-edge--left { left:0; } .map-scroll-edge--right { right:0; } diff --git a/library/components/legends/LegendMobile.vue b/library/components/legends/LegendMobile.vue index d1d1fa9fb..01ffc329b 100644 --- a/library/components/legends/LegendMobile.vue +++ b/library/components/legends/LegendMobile.vue @@ -19,10 +19,9 @@ useShadowStyles(` the SAME component desktop uses, with all the same default CSS. Mobile no longer overrides any .lrg-* rule — the bottom sheet is purely mobile chrome (pull tab, collapse/expand caret, touch drag). ── */ -/* bottom = 30% (the sheet's open height) + 16px gap + a 28px band that keeps the - Mapbox logo visible: the bottom-left control is lifted by the sheet height (see - the --legend-sheet-h rule below) and would otherwise sit under this image. */ -.floating-mini-image{position:absolute;left:16px;bottom:calc(30% + 44px);z-index:999;pointer-events:auto;cursor:pointer;} +/* bottom = 30% (the sheet's open height) + 16px gap. The Mapbox watermark lives bottom-right + and only rises by the collapsed strip, so nothing else needs room under this image. */ +.floating-mini-image{position:absolute;left:16px;bottom:calc(30% + 16px);z-index:999;pointer-events:auto;cursor:pointer;} .mini-image{width:120px;height:150px;object-fit:cover;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.25);display:block;} /* Containment root: clamps absolute children to the map area. */