From 487e3c9aa280e2c9e80665e79c2c2a143c9e2e6c Mon Sep 17 00:00:00 2001 From: doxa-maps-88655c70 <88627970+doxa-maps-88655c70@users.noreply.github.com> Date: Thu, 24 Sep 2026 16:23:11 +0000 Subject: [PATCH] Give the regions map the shared scroll-past edge strips MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Driver asked for the affordance every other map here already has. The flag alone was not enough: useEdgeScrollAffordance does not create the strips, it scans the wrapper for them and returns a no-op when it finds none, so flipping showEdgeBorders left the page with zero strips. The markup and its CSS are per-consumer in all five existing users; only the behaviour is shared. Both are ported from upg-100-list rather than written fresh — including touch-action:pan-y, which is the mechanism that lets a vertical drag scroll the page while Mapbox keeps the centre. The reason the flag was originally false is kept in the file rather than deleted, because it is the thing to re-examine if the result looks wrong: this map sits inside a scrolling dashboard, where the gutters can read as page chrome rather than map chrome. The reference maps own their viewport. --- .../src/RegionCountryMap.vue | 29 +++++++++++++++++-- public/doxa-maps/index.html | 2 +- public/doxa-maps/manifest.json | 8 ++--- .../region-dashboards/index.html | 2 +- .../regions-dashboard/regions-dashboard.js | 26 ++++++++--------- .../regions-dashboard/regions-list/index.html | 2 +- .../regions-dashboard/regions-mfe/index.html | 2 +- 7 files changed, 47 insertions(+), 24 deletions(-) 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(