diff --git a/plugin-designs/regions-dashboard/src/RegionCountryMap.vue b/plugin-designs/regions-dashboard/src/RegionCountryMap.vue index d2cb3ca67..65f5c28d4 100644 --- a/plugin-designs/regions-dashboard/src/RegionCountryMap.vue +++ b/plugin-designs/regions-dashboard/src/RegionCountryMap.vue @@ -117,9 +117,16 @@ const { map, isMapReady, initializeMap, destroy } = useMapInstance({ center: props.center, zoom: props.zoom, maxZoom: 12, - // The map sits inside a scrolling dashboard, so the gray "scroll past me" strips would read as - // part of the page rather than as map chrome. - showEdgeBorders: false, + // THE SHARED EDGE-SCROLL STRIPS, on by Driver decision (2026-09-24, via shepherd card + // BUILD-REGIONS-MAP-RESTORE-EDGE-SCROLL-STRIPS). This was deliberately false, and the reason is + // kept here rather than deleted because it is the thing to re-examine if the result looks wrong: + // the map sits inside a SCROLLING dashboard, so the gray "you can scroll past me" gutters read + // as part of the page rather than as map chrome — unlike the reference maps + // (my-upg-100-list, doxa-research-map), where the map owns its viewport. + // Every other regions map already takes the library default (true); this was the one opt-out. + // useMapInstance.js:290 defaults it true and wires useEdgeScrollAffordance at :551, so this is + // the shared composable, not a hand-rolled strip. + showEdgeBorders: true, }) const SRC_PINS = 'rcm-people-groups' @@ -397,6 +404,14 @@ watch(() => [props.countryCodes, props.bounds, props.center, props.zoom, props.p // 1/2 and no floor under 768px. Ported as an aspect-ratio pair; radius:inherit so the card that // contains it supplies the corner, exactly as theirs does. useShadowStyles( + // The shared scroll-past strips, ported verbatim from my-upg-100-list/upg-100-list.vue:378. + // touch-action:pan-y IS the mechanism: it lets a vertical drag scroll the PAGE while Mapbox + // keeps the centre, which is the whole point of the affordance on a map inside a scrolling + // dashboard. .rcm is already position:relative, so these anchor to it. + '.map-scroll-edge{position:absolute;top:0;bottom:0;width:40px;z-index:2;' + + 'touch-action:pan-y;pointer-events:auto;background:transparent}' + + '.map-scroll-edge--left{left:0}' + + '.map-scroll-edge--right{right:0}' + '.rcm{ display:block; position:relative; width:100%; min-height:780px; aspect-ratio:16/9;' + ' overflow:hidden; border-radius:inherit; }' + '@media (max-width:768px){ .rcm{ min-height:0; aspect-ratio:1/2; } }' + @@ -419,6 +434,14 @@ useShadowStyles(