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 @@ - + - + - +