From 6235245d2d23b6e89611e945f3c40d1314d04bbc Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Mon, 28 Sep 2026 19:24:30 +0000 Subject: [PATCH] Stop the Population card stretching across a tablet row MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Driver test round 2. The last of four stat cards was centred in a box four times too wide on a tablet, and only on a tablet: auto-fit collapses the empty tracks, so at three columns the lone card in row two stretched across the whole row. Desktop fits all four, which is why desktop was the one width that looked right. auto-fill alone fixes that and breaks desktop — dx-shepherd caught it before I landed it. At 1200px auto-fill makes SIX tracks for four cards, leaving two empty on the right and squeezing the cards back to their 180px floor. So the track minimum is capped at a quarter of the row as well: at most four tracks ever, and an orphan is never stretched. Measured rather than reasoned, at 1200/1000/900/800/768/700/600/500/390: four columns down to 800, three to 600, two below that, and no empty track at any of them. ⚠ This now differs from dx-life on purpose. Theirs is the same auto-fit rule at RegionDetail.vue:176 and stretches the same card; the clone is faithful and the Driver still reported it, so the report is the decision. --- .../regions-dashboard/region-dashboards.vue | 15 ++++++++++++++- public/dx-maps/doxa-maps-spa/manifest.json | 8 ++++---- public/dx-maps/manifest.json | 8 ++++---- .../region-dashboards/index.html | 2 +- .../regions-dashboard/regions-dashboard.js | 2 +- .../regions-dashboard/regions-list/index.html | 2 +- .../regions-dashboard/regions-mfe/index.html | 2 +- 7 files changed, 26 insertions(+), 13 deletions(-) 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 @@ - + - + - +