fix(insights): keep mood correlation captions inside their tiles on phone widths

The correlation-card header's right slot kept its icon-era shrink-0
after v1.22 replaced the info glyph with an inline caption — the
unshrinkable badge+caption row escaped the card's right edge by
14–39 px at 390/360 across all five cards and squeezed the title to a
2-line 36–42 % sliver. The caption now stacks under the title below sm
(only the compact strength badge stays pinned right); on >=sm the
inline layout is unchanged.

Same surface: the discovered-relations stat caption ('{n} gepaarte
Tage · r · q') stacks below its finding sentence on phone widths
instead of wrapping to a 4-line sliver at ~25 % of the row, and the
subsection caveat caption stacks under the subheading instead of
wrapping 9 lines beside it.

The phone-width density guard now sweeps /insights/mood too, with
mocked correlation + discovery payloads pinning the populated worst
case (five cards, three mood pairs) so the guard cannot pass vacuously.

H6

src/components/insights/mood/mood-correlation-cards.tsx

@@ -105,7 +105,13 @@ function MoodCorrelationCard({
           title={t(TITLE_KEY[kind])}
           right={
             hasResult && data.result ? (
-              <div className="flex shrink-0 items-center gap-1.5">
+              // No `shrink-0` here: the slot kept its icon-era rigidity after
+              // v1.22 swapped the info glyph for an inline caption, and the
+              // unshrinkable badge+caption row escaped the card's right edge
+              // by 14–39 px on phone viewports. The caption itself moves
+              // below the title on <sm (see the sm:hidden twin under the
+              // header); only the compact badge stays pinned right.
+              <div className="flex min-w-0 items-center gap-1.5">
                 <Badge variant="outline" className="text-[10px]">
                   {t(STRENGTH_KEY[data.result.strength])}
                 </Badge>
@@ -113,6 +119,7 @@ function MoodCorrelationCard({
                     scatter as a half-empty row. Move it into an explainer icon
                     in the header so the card footprint stays tight. */}
                 <MoodExplainerIcon
+                  className="hidden whitespace-nowrap sm:inline"
                   label={t("insights.mood.correlation.sourceLabel")}
                   detail={t("insights.mood.correlation.source", {
                     n: data.n,
@@ -123,6 +130,18 @@ function MoodCorrelationCard({
             ) : undefined
           }
         />
+        {/* <sm twin of the header caption: stacked under the title so the
+            title keeps the row width and nothing can escape the tile. */}
+        {hasResult && data.result ? (
+          <MoodExplainerIcon
+            className="sm:hidden"
+            label={t("insights.mood.correlation.sourceLabel")}
+            detail={t("insights.mood.correlation.source", {
+              n: data.n,
+              r: data.result.r.toFixed(2),
+            })}
+          />
+        ) : null}
       </CardHeader>
       <CardContent className="space-y-3">
         {hasResult && data.result ? (

src/components/insights/mood/mood-discovered-relations.tsx

@@ -90,7 +90,10 @@ export function MoodDiscoveredRelations({
     // observational disclaimer fold into the one tooltip) so the surface stops
     // spending a muted paragraph on a footnote.
     <div data-slot="mood-discovered-relations" className="space-y-1">
-      <div className="text-foreground flex items-center gap-1.5 text-sm font-medium">
+      {/* <sm stacks the caveat caption under the subheading — beside a
+          2-line heading it wrapped to 9 lines at ~58 % of the row width on
+          phone viewports. */}
+      <div className="text-foreground flex flex-col gap-1 text-sm font-medium sm:flex-row sm:items-center sm:gap-1.5">
         <span>{t("insights.mood.discovery.subheading")}</span>
         <MoodExplainerIcon
           label={t("insights.mood.discovery.explainerLabel")}
@@ -121,10 +124,11 @@ export function MoodDiscoveredRelations({
               data-direction={up ? "up" : "down"}
             >
               {/* The {n} paired days · r · q numeric detail rides an explainer
-                  icon on the same line as the finding so the list stays one
-                  row per pair. The finding itself reads in the standard
-                  foreground colour. */}
-              <span className="text-foreground flex items-center gap-1.5">
+                  caption beside the finding on ≥sm; on phone widths it stacks
+                  below the sentence instead of squeezing to a 4-line sliver
+                  at ~25 % of the row. The finding itself reads in the
+                  standard foreground colour. */}
+              <span className="text-foreground flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-1.5">
                 <span>{t(sentenceKey, { factor: factorLabel })}</span>
                 <MoodExplainerIcon
                   label={t("insights.mood.discovery.statLabel")}