From 29e2b44310ab71f30f915b1dcbfb2113c1659e41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Tue, 7 Jul 2026 10:36:45 +0200
Subject: [PATCH] fix(insights): stack the health-score delta caption below the
 delta line

The v1.22 inline explainer caption rendered INSIDE the delta line's
inline-flex row, so the short delta text ("-2 vs last week") wrapped
into a narrow four-line column beside the multi-sentence read on every
viewport. The wrapper now stacks: delta line with its trend icon on
top, the caption below at full width. The aria-describedby thread from
the delta digit to the caption id is unchanged.
---
 .../__tests__/health-score-card.test.tsx      | 25 ++++++++
 src/components/insights/health-score-card.tsx | 59 +++++++++++--------
 2 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/src/components/insights/__tests__/health-score-card.test.tsx b/src/components/insights/__tests__/health-score-card.test.tsx
index ef0ee82e5..0353d7719 100644
--- a/src/components/insights/__tests__/health-score-card.test.tsx
+++ b/src/components/insights/__tests__/health-score-card.test.tsx
@@ -157,6 +157,31 @@ describe("<HealthScoreCard>", () => {
     );
   });
 
+  it("stacks the explainer caption BELOW the delta line, not beside it", () => {
+    // The caption is a multi-sentence read; rendering it inside the
+    // delta's inline-flex row squeezed the short delta into a narrow
+    // multi-line column on every viewport. The wrapper stacks instead.
+    const html = ssr(
+      <HealthScoreCard
+        score={64}
+        band="yellow"
+        components={baseComponents}
+        delta={-3}
+      />,
+    );
+    const wrapper = html.match(
+      /data-slot="health-score-card-delta"[^>]*class="([^"]*)"/,
+    );
+    expect(wrapper).not.toBeNull();
+    expect(wrapper?.[1]).toContain("space-y-1");
+    expect(wrapper?.[1]).not.toContain("inline-flex");
+    // The delta line's <p> closes before the explainer body opens —
+    // the caption is a sibling below, never a flex neighbour.
+    expect(html).toMatch(
+      /vs last week[^<]*<\/span><\/p><span[^>]*data-slot="health-score-delta-explainer-body"/,
+    );
+  });
+
   it("renders four component rows with their values", () => {
     const html = ssr(
       <HealthScoreCard
diff --git a/src/components/insights/health-score-card.tsx b/src/components/insights/health-score-card.tsx
index 1dc4a637b..1ecff0abd 100644
--- a/src/components/insights/health-score-card.tsx
+++ b/src/components/insights/health-score-card.tsx
@@ -407,41 +407,52 @@ export function HealthScoreCard({
             on phone-class viewports. The explainer only mounts when
             a numeric delta is available; the "no history yet"
             branch keeps the existing single-line caption. */}
-        <p
+        {/* The delta digit and the explainer caption stack — the caption
+            is a multi-sentence read, and rendering it INSIDE the delta's
+            inline-flex row squeezed the short delta line into a narrow
+            multi-line column beside it on every viewport. The delta line
+            keeps its icon row; the caption sits below at full width. */}
+        <div
           data-slot="health-score-card-delta"
-          className="text-muted-foreground inline-flex items-center gap-1 text-xs"
+          className="text-muted-foreground space-y-1 text-xs"
         >
           {delta === null ? (
-            <span>{t("insights.healthScore.deltaUnavailable")}</span>
+            <p>{t("insights.healthScore.deltaUnavailable")}</p>
           ) : (
             <>
-              {delta > 0 && (
-                <ArrowUp className="text-success h-3 w-3" aria-hidden="true" />
-              )}
-              {delta < 0 && (
-                <ArrowDown
-                  className="text-destructive h-3 w-3"
-                  aria-hidden="true"
-                />
-              )}
-              {delta === 0 && (
-                <Minus
-                  className="text-muted-foreground h-3 w-3"
-                  aria-hidden="true"
-                />
-              )}
-              <span aria-describedby={deltaExplainerId}>
-                {t("insights.healthScore.deltaVsLastWeek", {
-                  delta: delta > 0 ? `+${delta}` : `${delta}`,
-                })}
-              </span>
+              <p className="flex items-center gap-1">
+                {delta > 0 && (
+                  <ArrowUp
+                    className="text-success h-3 w-3"
+                    aria-hidden="true"
+                  />
+                )}
+                {delta < 0 && (
+                  <ArrowDown
+                    className="text-destructive h-3 w-3"
+                    aria-hidden="true"
+                  />
+                )}
+                {delta === 0 && (
+                  <Minus
+                    className="text-muted-foreground h-3 w-3"
+                    aria-hidden="true"
+                  />
+                )}
+                <span aria-describedby={deltaExplainerId}>
+                  {t("insights.healthScore.deltaVsLastWeek", {
+                    delta: delta > 0 ? `+${delta}` : `${delta}`,
+                  })}
+                </span>
+              </p>
               <HealthScoreDeltaExplainer
+                className="block"
                 delta={delta}
                 bodyId={deltaExplainerId}
               />
             </>
           )}
-        </p>
+        </div>
 
         {/* v1.18.6 — Rest Mode legibility. While an illness episode is
             active the server suppresses (never penalises) the score, so