From 97d0ef264a6b76606b7e558677d5b8ed8c526de4 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Sat, 26 Sep 2026 05:35:51 +0000 Subject: [PATCH] Clamp the goal card's big number as theirs does; the nowrap worry was backwards MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit utilities/_typography.scss gives .font-size-4xl a clamp: font-size: clamp(var(--font-size-2xl), 6vw, var(--font-size-4xl)) and ours was a flat var(--font-size-4xl). Identical at 1024 and above, where both sit on the ceiling, but below that ours never shrank. Their resolved values against ours: 390px theirs 38.15 ours 59.60 ours 21.46 too large 768px theirs 46.08 ours 59.60 ours 13.52 too large 1024px+ theirs 59.60 ours 59.60 identical ★ I REPORTED THIS AS UNCHANGEABLE ONE COMMIT AGO, AND THAT WAS BACKWARDS. I said it interacted with the documented nowrap decision — a figure must never split across lines in a 372px card, which is why the flat value was chosen. But the clamp makes the figure SMALLER exactly where the wrap was observed: in a 372px container 6cqw is 22.3px, below the 2xl floor, so it resolves to 38.15px against the 59.60px that was breaking. The clamp helps the very problem the flat value was picked to avoid. I had assumed a conflict instead of computing it, and one line of arithmetic settled it. The nowrap stays as a belt. cqw rather than vw, consistent with every other clamp in this element (the container-vs-viewport substitution the Driver is still ruling on). At 768 that lands 42.4 against their 46.08 — 3.68 off instead of 13.52. _chk-clamp-floors-at-phone-and-tablet.mjs picks the new clamp up on its own: 14 clamps now, and 12/12 token-bounded ones still pin to their floor at 390, so the "exact parity at phone width, provable without a container measurement" result now covers the big number too. --- .../regions-dashboard/region-dashboards.vue | 23 ++++++++++++++----- 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, 29 insertions(+), 18 deletions(-) diff --git a/plugin-designs/regions-dashboard/region-dashboards.vue b/plugin-designs/regions-dashboard/region-dashboards.vue index 3b1fe4220..f65b184c9 100644 --- a/plugin-designs/regions-dashboard/region-dashboards.vue +++ b/plugin-designs/regions-dashboard/region-dashboards.vue @@ -965,13 +965,24 @@ useShadowStyles( // 1.1, which was compensating for the base line-height we never ported (now on :host in // dxlife-tokens.js). rega measured the cost: 24px of card height, their number ~12px lower and its // label ~24px lower. Inheriting is the faithful port. - // STILL DIFFERENT, AND DELIBERATELY NOT CHANGED HERE: their utility is + // ★ NOW A CLAMP, LIKE THEIRS, AND IT RESOLVES THE NOWRAP WORRY RATHER THAN FIGHTING IT. + // utilities/_typography.scss gives .font-size-4xl // font-size: clamp(var(--font-size-2xl), 6vw, var(--font-size-4xl)) - // where ours is a flat var(--font-size-4xl). Identical at 1440 (both clamp to the ceiling) but - // divergent below it — at 768 theirs is 6vw = 46.08px and ours stays 59.6px. That interacts with - // the documented nowrap decision above (a figure must never split across lines in a 372px card), - // so it is measured and reported rather than changed in the same commit. - '.rd-big{ margin:0; font-size:var(--font-size-4xl); font-weight:500; }' + + // and ours was a flat var(--font-size-4xl). Identical at 1440 and above (both sit on the ceiling), + // but below that ours never shrank -- MEASURED against their resolved values: + // 390px viewport theirs 38.15 ours 59.60 ours 21.46 too large + // 768px viewport theirs 46.08 ours 59.60 ours 13.52 too large + // 1024px and up theirs 59.60 ours 59.60 identical + // I had reported this as unchangeable because of the nowrap note above -- a figure must never + // split across lines in a 372px card. That was backwards: the clamp makes the figure SMALLER + // exactly where the wrap was observed. In a 372px container 6cqw is 22.3px, below the 2xl floor, + // so it resolves to 38.15px against the 59.60px that was breaking. The clamp helps the very + // problem the flat value was chosen for, and the nowrap stays as a belt. + // cqw not vw, consistent with every other clamp in this element (the container-vs-viewport + // substitution the Driver is still ruling on); at 768 that lands 42.4 against their 46.08, which + // is 3.68 off instead of 13.52. + '.rd-big{ margin:0; font-size:clamp(var(--font-size-2xl), 6cqw, var(--font-size-4xl));' + + ' font-weight:500; }' + '.rd-goal-card .rd-big{ white-space:nowrap; }' + '.rd-big-label{ margin:0; font-size:var(--font-size-lg); }' + // .stack .stack--xs, inside the Prayer Coverage card. diff --git a/public/dx-maps/doxa-maps-spa/manifest.json b/public/dx-maps/doxa-maps-spa/manifest.json index 30f3840a5..3a067840d 100644 --- a/public/dx-maps/doxa-maps-spa/manifest.json +++ b/public/dx-maps/doxa-maps-spa/manifest.json @@ -887,7 +887,7 @@ "bundle": "regions-dashboard", "scriptUrl": "./regions-dashboard/regions-dashboard.js", "output": "dx-maps/regions-dashboard/regions-dashboard.js", - "integrity": "sha384-pcivZWQnbSkSTEtgC1I8MyLfxVBLKrHxefzaBY4YSzRrRyvM6IJwP9R69jlZM5m1", + "integrity": "sha384-jT5oQvq+rL+kN1mntFdDK9/2Hr5OXs0lauVtMy6aF/5Ew0RztprGwyMujqhkQRA9", "elements": [ "regions-dashboard" ], @@ -907,7 +907,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } }, { @@ -921,7 +921,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n" + "script": "\n\n" } }, { @@ -935,7 +935,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } } ] diff --git a/public/dx-maps/manifest.json b/public/dx-maps/manifest.json index 30f3840a5..3a067840d 100644 --- a/public/dx-maps/manifest.json +++ b/public/dx-maps/manifest.json @@ -887,7 +887,7 @@ "bundle": "regions-dashboard", "scriptUrl": "./regions-dashboard/regions-dashboard.js", "output": "dx-maps/regions-dashboard/regions-dashboard.js", - "integrity": "sha384-pcivZWQnbSkSTEtgC1I8MyLfxVBLKrHxefzaBY4YSzRrRyvM6IJwP9R69jlZM5m1", + "integrity": "sha384-jT5oQvq+rL+kN1mntFdDK9/2Hr5OXs0lauVtMy6aF/5Ew0RztprGwyMujqhkQRA9", "elements": [ "regions-dashboard" ], @@ -907,7 +907,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } }, { @@ -921,7 +921,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n" + "script": "\n\n" } }, { @@ -935,7 +935,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n" + "script": "\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 30eb5f6a2..f3f978381 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 @@ - + - + - +