From a2dff85fb8bb12609b10ebfacfb52a3021701cd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 4 Jun 2026 16:54:32 +0200
Subject: [PATCH] fix(insights): contain the mood trend card so its axis labels
 stop overflowing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Trends row renders three mini-chart cards (blood pressure, weight,
mood). The mood card alone overflowed: its categorical y-axis ("Super
gut/Gut/Okay/...") and date x-axis paint inside a Card shell that runs
taller than the flat HealthChart minis beside it, so the x-axis date
labels bled past the fixed chart slot and overlapped the caption below.

Bound the overflow on the slot itself, without touching the chart
components:

- `overflow-hidden` clips anything the inner chart paints past the
  180px envelope, so a stray axis label can never escape into the
  caption row.
- `[--chart-height:120px]` drives both mini charts' internal band down
  to a shared 120px (both honour `h-[var(--chart-height,140px)]`). The
  mood card's full envelope — band + header chrome + axis labels — now
  fits inside 180px, so all three tiles share one chart-band baseline.

Recharts and the chart tokens are untouched; the fix lives entirely on
the row's slot container.
---
 .../insights/__tests__/trends-row.test.tsx    | 20 ++++++++++++++++
 src/components/insights/trends-row.tsx        | 24 +++++++++++++++++--
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/insights/__tests__/trends-row.test.tsx b/src/components/insights/__tests__/trends-row.test.tsx
index 215e5703b..05f33aaa0 100644
--- a/src/components/insights/__tests__/trends-row.test.tsx
+++ b/src/components/insights/__tests__/trends-row.test.tsx
@@ -128,6 +128,26 @@ describe("<TrendsRow>", () => {
     }
   });
 
+  it("bounds the chart slot so the mood card's axis labels stay contained (item I)", () => {
+    // v1.11.4 item I — the mood mini chart is a `<Card>` (extra header
+    // + padding chrome) wrapping a categorical y-axis + a date x-axis;
+    // its tick labels used to bleed past the 180 px envelope and
+    // overlap the caption below. The slot now (a) clips with
+    // `overflow-hidden` so nothing escapes the envelope and (b) drives
+    // both mini charts' internal band down to 120 px via
+    // `[--chart-height:120px]` so the mood card's full envelope
+    // (band + header + axis labels) fits inside 180 px and the three
+    // tiles share one chart-band baseline.
+    const html = render(<TrendsRow />);
+    const slots =
+      html.match(/data-slot="trends-row-chart-slot"[^>]*class="[^"]*"/g) ?? [];
+    expect(slots.length).toBe(3);
+    for (const slot of slots) {
+      expect(slot).toMatch(/overflow-hidden/);
+      expect(slot).toMatch(/\[--chart-height:120px\]/);
+    }
+  });
+
   it("renders annotations when supplied", () => {
     const html = render(
       <TrendsRow
diff --git a/src/components/insights/trends-row.tsx b/src/components/insights/trends-row.tsx
index 1bfc94499..c08d5f3bd 100644
--- a/src/components/insights/trends-row.tsx
+++ b/src/components/insights/trends-row.tsx
@@ -199,10 +199,30 @@ export function TrendsRow({
               {/* v1.4.28 R3c-Insights — fixed chart slot. The mini
                   chart paints its own band; this wrapper pins the
                   total chart-envelope height so every tile lines up on
-                  a single baseline regardless of the chart kind. */}
+                  a single baseline regardless of the chart kind.
+
+                  v1.11.4 item I — the slot is now the hard bound for
+                  every chart kind. Two changes close the mood-card
+                  overflow (its categorical y-axis + date x-axis bled
+                  the tick labels out the bottom, overlapping the
+                  caption, and the `<Card>` shell ran taller than the
+                  flat `<HealthChart mini>` siblings):
+
+                    - `overflow-hidden` clips anything the inner chart
+                      paints past the 180 px envelope, so a stray axis
+                      label can never escape into the caption row.
+                    - `[--chart-height:120px]` drives BOTH mini charts'
+                      internal band (they read `h-[var(--chart-height,
+                      140px)]`) down to a shared 120 px. 120 px + the
+                      mood `<Card>` header/padding chrome (~36 px) + the
+                      x-axis tick band (~16 px) lands inside the 180 px
+                      envelope, so the mood card no longer overflows and
+                      the three tiles share one chart-band baseline. No
+                      chart-component edit, no token churn — the bound
+                      lives entirely on this slot. */}
               <div
                 data-slot="trends-row-chart-slot"
-                className="h-[180px] shrink-0"
+                className="h-[180px] shrink-0 overflow-hidden [--chart-height:120px]"
               >
                 <MetricChart config={config} title={title} />
               </div>