diff --git a/plugin-designs/regions-dashboard/region-dashboards.vue b/plugin-designs/regions-dashboard/region-dashboards.vue index e7f12782c..fb6e22d11 100644 --- a/plugin-designs/regions-dashboard/region-dashboards.vue +++ b/plugin-designs/regions-dashboard/region-dashboards.vue @@ -843,7 +843,20 @@ useShadowStyles( // ── .region-stats: RegionDetail.vue's scoped block. The GRID stays here and the CARD went to the // library, deliberately: how many stats there are and how they wrap is this page's decision, // while the look of one stat is the reusable part. See library/components/regions/StatCard.vue. - '.rd-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));' + + // ★ auto-FILL WITH A CAPPED TRACK MINIMUM. Driver test round 2: the Population card — the LAST + // of four — was centred in a box four times too wide on a tablet. Cause: auto-FIT collapses the + // empty tracks, so at 3 columns the lone card in row 2 stretched across the whole row. Desktop + // fits all four, which is why only desktop looked right. + // auto-fill alone fixes that and breaks desktop: at 1200px it makes SIX tracks for four cards, + // leaving two empty on the right and squeezing the cards to their 180px floor (dx-shepherd). + // So the track minimum is also capped at a quarter of the row: at most four tracks ever, and the + // orphan is never stretched. Measured at 1200/1000/900/800/768/700/600/500/390 — four columns + // down to 800, three to 600, two below, no empty tracks at any of them. + // ⚠ THIS NOW DIFFERS FROM dx-life, deliberately. Theirs is the same auto-fit rule + // (RegionDetail.vue:176) and stretches the same card; the Driver reported it, and dx-shepherd is + // telling him it diverges. + '.rd-stats{ display:grid;' + + ' grid-template-columns:repeat(auto-fill, minmax(max(180px, calc((100% - 3 * var(--spacing-md)) / 4)), 1fr));' + ' gap:var(--spacing-md); }' + '.rd-chart{ padding:var(--spacing-lg) clamp(var(--spacing-md), 4cqw, var(--spacing-xl)); }' + // RegionDetail wraps the note and the map in a .stack--sm (13.3px). The note is their diff --git a/public/dx-maps/doxa-maps-spa/manifest.json b/public/dx-maps/doxa-maps-spa/manifest.json index 5b55a09f3..6b3d9821a 100644 --- a/public/dx-maps/doxa-maps-spa/manifest.json +++ b/public/dx-maps/doxa-maps-spa/manifest.json @@ -1080,7 +1080,7 @@ "bundle": "regions-dashboard", "scriptUrl": "./regions-dashboard/regions-dashboard.js", "output": "dx-maps/regions-dashboard/regions-dashboard.js", - "integrity": "sha384-hs/1YUT9BHJG4zlm5gr5nfC8qBe7DJVehvuvZ21aXesy0IXJYbZtCgmAE+8+juvu", + "integrity": "sha384-ClTPZXPAp0TW75libbg5ebhKUZfGDTYAVKQ6GAKJcn5TfWNk2FD9hyZRWrrXOdtX", "elements": [ "regions-dashboard" ], @@ -1103,7 +1103,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n" + "script": "\n\n\n\n\n" } }, { @@ -1119,7 +1119,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n" + "script": "\n\n\n" } }, { @@ -1135,7 +1135,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n" + "script": "\n\n\n\n\n" } } ] diff --git a/public/dx-maps/manifest.json b/public/dx-maps/manifest.json index 5b55a09f3..6b3d9821a 100644 --- a/public/dx-maps/manifest.json +++ b/public/dx-maps/manifest.json @@ -1080,7 +1080,7 @@ "bundle": "regions-dashboard", "scriptUrl": "./regions-dashboard/regions-dashboard.js", "output": "dx-maps/regions-dashboard/regions-dashboard.js", - "integrity": "sha384-hs/1YUT9BHJG4zlm5gr5nfC8qBe7DJVehvuvZ21aXesy0IXJYbZtCgmAE+8+juvu", + "integrity": "sha384-ClTPZXPAp0TW75libbg5ebhKUZfGDTYAVKQ6GAKJcn5TfWNk2FD9hyZRWrrXOdtX", "elements": [ "regions-dashboard" ], @@ -1103,7 +1103,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n" + "script": "\n\n\n\n\n" } }, { @@ -1119,7 +1119,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n" + "script": "\n\n\n" } }, { @@ -1135,7 +1135,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n" + "script": "\n\n\n\n\n" } } ] diff --git a/public/dx-maps/regions-dashboard/region-dashboards/index.html b/public/dx-maps/regions-dashboard/region-dashboards/index.html index 4cbbfc8c2..02e395b99 100644 --- a/public/dx-maps/regions-dashboard/region-dashboards/index.html +++ b/public/dx-maps/regions-dashboard/region-dashboards/index.html @@ -36,7 +36,7 @@ - + - + - +