fix(dashboard): stack briefing-row headline over delta on phone widths

A long signal headline beside a wide delta string squeezed the headline
into a one-word-per-line column on the hero spotlight rows; at 360 px
the delta pushed past the tile edge and got cut off by the band's
overflow clip. Below sm the headline/delta pair now stacks — headline
wraps at full row width, the delta sits beneath as a left-aligned
tone-coloured line — and the side-by-side row returns at sm+. Same
treatment on the /insights briefing card's shared finding/signal rows,
which speak the identical row language.

src/components/dashboard/hero/__tests__/briefing-spotlight.test.tsx

@@ -180,4 +180,34 @@ describe("<BriefingSpotlight>", () => {
     const rows = html.match(/data-slot="dashboard-briefing-spotlight-row"/g);
     expect(rows).toHaveLength(3);
   });
+
+  it("stacks headline over delta below sm and keeps the row at sm+", () => {
+    const html = render({
+      briefing: briefing({
+        signalsOfDay: [
+          {
+            sourceMetric: "bp",
+            tone: "watch",
+            headline:
+              "Systolischer Blutdruck deutlich unter deinem Monatsmittel gemessen",
+            nudge: "n",
+            delta: "−12 mmHg vs. 30-Tage-Mittel",
+          },
+        ],
+      }),
+      briefingState: "ready",
+      briefingStale: false,
+    });
+    // Phone-first column, row restored at sm+ — a wide delta must never
+    // squeeze the headline into a narrow multi-line column (or push
+    // itself past the tile edge).
+    expect(html).toMatch(
+      /class="[^"]*flex min-w-0 flex-1 flex-col gap-1 sm:flex-row[^"]*"/,
+    );
+    // The delta is left-aligned content-width in the stacked state and
+    // only refuses to shrink in the sm+ row.
+    expect(html).toMatch(
+      /data-slot="dashboard-briefing-spotlight-delta"[^>]*class="[^"]*self-start[^"]*sm:shrink-0[^"]*"/,
+    );
+  });
 });

src/components/dashboard/hero/briefing-spotlight.tsx

@@ -196,7 +196,14 @@ export function BriefingSpotlight({
                   )}
                   aria-hidden="true"
                 />
-                <div className="flex min-w-0 flex-1 items-start justify-between gap-3">
+                {/* Phone widths stack headline over delta — a long
+                    signal headline beside a long delta squeezed the
+                    headline into a one-word-per-line column and pushed
+                    the delta past the tile edge. At `sm+` the
+                    side-by-side row returns. The headline always wraps
+                    (content is never truncated); only the delta is meta
+                    and may stay on one line. */}
+                <div className="flex min-w-0 flex-1 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-3">
                   <p className="text-foreground text-sm leading-snug font-medium">
                     {stripChartTokens(row.headline)}
                   </p>
@@ -204,7 +211,7 @@ export function BriefingSpotlight({
                     <span
                       data-slot="dashboard-briefing-spotlight-delta"
                       className={cn(
-                        "shrink-0 text-xs font-semibold tabular-nums",
+                        "self-start text-xs font-semibold tabular-nums sm:shrink-0",
                         TONE_TEXT_CLASSNAME[row.tone],
                       )}
                     >

src/components/insights/__tests__/daily-briefing.test.tsx

@@ -102,6 +102,20 @@ describe("<DailyBriefing>", () => {
     expect(html).toContain("+6 mmHg");
   });
 
+  it("stacks headline over delta below sm and keeps the row at sm+", () => {
+    const html = render(<DailyBriefing briefing={baseBriefing} />);
+    // Phone-first column (headline above, delta beneath), side-by-side
+    // restored at sm+ — a wide delta must never squeeze the headline
+    // into a narrow multi-line column.
+    expect(html).toMatch(
+      /class="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-3"/,
+    );
+    // Delta badge stays content-width + left-aligned in the stacked state.
+    expect(html).toMatch(
+      /data-slot="daily-briefing-delta"[^>]*class="[^"]*self-start[^"]*sm:shrink-0[^"]*"/,
+    );
+  });
+
   it("does NOT render a delta badge when delta is null", () => {
     const html = render(
       <DailyBriefing

src/components/insights/daily-briefing.tsx

@@ -197,7 +197,9 @@ function DeltaBadge({
     <span
       data-slot="daily-briefing-delta"
       className={cn(
-        "text-xs font-semibold tabular-nums",
+        // `self-start` keeps the badge left-aligned + content-width when
+        // the parent row stacks into a column below `sm`.
+        "self-start text-xs font-semibold tabular-nums sm:shrink-0",
         TONE_TEXT_CLASSNAME[tone],
       )}
     >
@@ -243,7 +245,11 @@ function BriefingRow({
         aria-hidden="true"
       />
       <div className="min-w-0 flex-1 space-y-1">
-        <div className="flex items-start justify-between gap-3">
+        {/* Phone widths stack headline over delta (same treatment as the
+            dashboard spotlight rows): side-by-side squeezed a long
+            headline into a narrow multi-line column beside a long delta.
+            At `sm+` the row layout returns. */}
+        <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-3">
           <p className="text-sm leading-snug font-medium">
             {stripChartTokens(headline)}
           </p>