diff --git a/plugin-designs/regions-dashboard/region-dashboards.vue b/plugin-designs/regions-dashboard/region-dashboards.vue
index 2714e105f..be2bf7e5d 100644
--- a/plugin-designs/regions-dashboard/region-dashboards.vue
+++ b/plugin-designs/regions-dashboard/region-dashboards.vue
@@ -653,7 +653,17 @@ useShadowStyles(
// .container to the DETAIL routes too -- RegionDetail.vue:46 and CountryDetail.vue:35 are both
// class="container page-content ..." -- so the dashboard half is capped by the same rule.
// gap = their .stack--3xl (55.349px), the gap between every block on that page.
- '.rd-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;' +
+ // ★ scrollbar-gutter: stable — ported from their base/_globals.scss html rule, and it is
+ // LOAD-BEARING for layout, not cosmetic. MEASURED at 390px: their container is 353.5px
+ // and ours was 367px, because their html reserves the scrollbar gutter always and our
+ // scroller did not. 13.5px, invisible at 1440 where both cap at 1200 — which is exactly
+ // why a desktop-only diff read 68/68 while every mobile width was wrong.
+ // Worse, it CASCADED: at 768 our container came out 707.2px and theirs 693.7px, and
+ // their .switcher flips at 700px of container — so their three goal cards stacked and
+ // ours stayed three-across. One missing property, a different layout.
+ // We cannot set this on the host document from inside a shadow root, and should not;
+ // this element's own scroller is the box every child measures against.
+'.rd-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch;' +
' padding:55.349px 0 73.6142px; display:flex; flex-direction:column; gap:55.349px;' +
' container-type:inline-size; }' +
'.rd-scroll > *{ box-sizing:border-box; width:calc(90% + 16px); max-width:1200px;' +
diff --git a/plugin-designs/regions-dashboard/regions-list.vue b/plugin-designs/regions-dashboard/regions-list.vue
index 07e68122d..61f149435 100644
--- a/plugin-designs/regions-dashboard/regions-list.vue
+++ b/plugin-designs/regions-dashboard/regions-list.vue
@@ -277,7 +277,17 @@ useShadowStyles(
// in research-dashboard.vue:284. Safe here because nothing in this element is position:fixed --
// inline-size containment is what made a fixed scrim pane-relative in check:scrim-viewport.
// Side padding is deliberately 0: the .container formula below supplies the gutter, as theirs does.
- '.rl-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;' +
+ // ★ scrollbar-gutter: stable — ported from their base/_globals.scss html rule, and it is
+ // LOAD-BEARING for layout, not cosmetic. MEASURED at 390px: their container is 353.5px
+ // and ours was 367px, because their html reserves the scrollbar gutter always and our
+ // scroller did not. 13.5px, invisible at 1440 where both cap at 1200 — which is exactly
+ // why a desktop-only diff read 68/68 while every mobile width was wrong.
+ // Worse, it CASCADED: at 768 our container came out 707.2px and theirs 693.7px, and
+ // their .switcher flips at 700px of container — so their three goal cards stacked and
+ // ours stayed three-across. One missing property, a different layout.
+ // We cannot set this on the host document from inside a shadow root, and should not;
+ // this element's own scroller is the box every child measures against.
+'.rl-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch;' +
' padding:20px 0; display:flex; flex-direction:column; gap:23.5264px;' +
' container-type:inline-size; }' +
// ★ THE DESKTOP MAX-WIDTH, ported verbatim from DX-life's .container
diff --git a/public/doxa-maps/manifest.json b/public/doxa-maps/manifest.json
index 960defe84..5fef7c1be 100644
--- a/public/doxa-maps/manifest.json
+++ b/public/doxa-maps/manifest.json
@@ -838,7 +838,7 @@
"bundle": "regions-dashboard",
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"output": "doxa-maps/regions-dashboard/regions-dashboard.js",
- "integrity": "sha384-WGTEO4UGtTqTkbrv4VjKXBejcEHt6EYnem9sSu+xcDmxTAWDpBQ6DwjLfgubA7k+",
+ "integrity": "sha384-PkjCojT7LBeF8fuNq3Zm+b+UZZM3lqeypf6/5pVKRQLcwoaBge32MRu2pShn6DSz",
"elements": [
"regions-dashboard"
],
@@ -858,7 +858,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "",
- "script": "\n\n"
+ "script": "\n\n"
}
},
{
@@ -872,7 +872,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "",
- "script": "\n\n"
+ "script": "\n\n"
}
},
{
@@ -886,7 +886,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "",
- "script": "\n\n"
+ "script": "\n\n"
}
}
]
diff --git a/public/doxa-maps/regions-dashboard/region-dashboards/index.html b/public/doxa-maps/regions-dashboard/region-dashboards/index.html
index b472b9c49..05d2cae88 100644
--- a/public/doxa-maps/regions-dashboard/region-dashboards/index.html
+++ b/public/doxa-maps/regions-dashboard/region-dashboards/index.html
@@ -29,7 +29,7 @@
-
+
-
+
-
+