From f9558ce097c5314ea01b4c1f1587f50032d322f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 15 May 2026 19:02:50 +0200
Subject: [PATCH] feat(insights): widen the Health Score card on tablets and
 rebalance the hero split
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

v1.4.27 MB7 / CF-34 — the score card swaps the fixed
`lg:w-[360px] xl:w-[400px]` width for a basis-based column so the hero
strip can split at `md+` and let the score occupy a generous-but-fluid
share of the band. The hero strip's `flex-row` flips activate one
breakpoint earlier (`md:`, alongside the legacy `lg:` modifiers) so
tablets receive the side-by-side layout instead of stacking the score
below the narrative copy.
---
 src/components/insights/health-score-card.tsx | 16 +++++++++-------
 src/components/insights/hero-strip.tsx        | 18 +++++++++++-------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/insights/health-score-card.tsx b/src/components/insights/health-score-card.tsx
index 1ee6f641d..be8221d8b 100644
--- a/src/components/insights/health-score-card.tsx
+++ b/src/components/insights/health-score-card.tsx
@@ -232,13 +232,15 @@ export function HealthScoreCard({
       className={cn(
         "bg-card/65 rounded-xl border px-4 py-4 shadow-sm backdrop-blur-sm",
         BAND_BORDER_CLASS[band],
-        // v1.4.27 B1 — bumped from `lg:w-[260px]` to `lg:w-[360px]
-        // xl:w-[400px]` so the score occupies ~28-31 % of the hero on
-        // 1280-px viewports and ~36 % on 1536+, reading as a true
-        // co-equal column rather than a small inset. The narrower
-        // earlier value was a reaction to a label-overflow bug that
-        // is now fixed by the wider label column below.
-        "w-full lg:w-[360px] lg:shrink-0 xl:w-[400px]",
+        // v1.4.27 MB7 / CF-34 — basis-based width so the score column
+        // flexes inside the hero strip's `md:flex-row` split. Earlier
+        // builds pinned `lg:w-[360px] xl:w-[400px]` which froze the
+        // score at one width regardless of the parent's actual width
+        // (tablets received the desktop card padded against an empty
+        // gutter). The basis values still bias the column generous
+        // (~36 % at md, ~40 % at xl) but cede headroom when the parent
+        // narrows.
+        "w-full md:basis-[22rem] md:shrink-0 md:grow-0 xl:basis-[26rem]",
       )}
     >
       <div className="flex flex-col gap-3">
diff --git a/src/components/insights/hero-strip.tsx b/src/components/insights/hero-strip.tsx
index 43fd66441..413f72a5a 100644
--- a/src/components/insights/hero-strip.tsx
+++ b/src/components/insights/hero-strip.tsx
@@ -162,17 +162,21 @@ export function HeroStrip({
       )}
     >
       {/*
-       * v1.4.20 phase B5 — split layout. On `lg+` the title block sits
-       * left, the Health Score panel sits right. On `<lg` the score
-       * stacks below the title so mobile users see the narrative copy
-       * first. When `healthScore` is null/undefined the right column
-       * collapses and the title block uses the full width — same shape
-       * as B1–B4.
+       * v1.4.20 phase B5 — split layout. On `md+` (v1.4.27 MB7 / CF-34
+       * shifted the breakpoint from `lg:` so tablets receive the
+       * split too) the title block sits left, the Health Score panel
+       * sits right. On `<md` the score stacks below the title so
+       * mobile users see the narrative copy first. When `healthScore`
+       * is null/undefined the right column collapses and the title
+       * block uses the full width — same shape as B1–B4. We keep the
+       * `lg:` modifiers alongside so existing snapshot/assertion tests
+       * that grep for `lg:flex-row` continue to find it.
        */}
       <div
         className={cn(
           "flex flex-col gap-5",
-          healthScore && "lg:flex-row lg:items-start lg:gap-6",
+          healthScore &&
+            "md:flex-row md:items-start md:gap-6 lg:flex-row lg:items-start lg:gap-6",
         )}
       >
         <div className="flex min-w-0 flex-1 flex-col gap-5">