From d8229c26dbaff65998da236f7c93cc42e994eadf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 16 May 2026 02:35:00 +0200
Subject: [PATCH] fix(insights): drop the residual border on the mood trend
 tile

The MoodChart mini wrapper rode the shadcn Card primitive which paints rounded-xl by default; the BP and weight tiles next to it paint rounded-md via the HealthChart mini shell. The trends row therefore showed two corner radii. Adding rounded-md to the mini override collapses the mood tile to the same radius so the three trend tiles share one chrome.
---
 .../__tests__/mood-chart-polish.test.tsx      | 25 +++++++++++++++++++
 src/components/charts/mood-chart.tsx          | 12 ++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/components/charts/__tests__/mood-chart-polish.test.tsx b/src/components/charts/__tests__/mood-chart-polish.test.tsx
index 7ce7b2f1a..32a1642a8 100644
--- a/src/components/charts/__tests__/mood-chart-polish.test.tsx
+++ b/src/components/charts/__tests__/mood-chart-polish.test.tsx
@@ -81,4 +81,29 @@ describe("<MoodChart> v1.4.18 clean-line revert", () => {
     expect(src).not.toContain("mood-emoji-glyph");
     expect(src).not.toMatch(/[\u{1F600}-\u{1F64F}]/u);
   });
+
+  it("paints the rounded-md mini shell so the trends row shares one radius", async () => {
+    // D-H5 — the mood-chart mini sits next to two HealthChart mini
+    // tiles on `/insights`. HealthChart mini paints
+    // `bg-card border-border rounded-md border p-2`; mood mini rode
+    // the shadcn `<Card>` default `rounded-xl`, so the trends row
+    // showed two corner radii. The override on the Card wrapper now
+    // collapses the mood tile to `rounded-md` to match.
+    const { I18nProvider } = await import("@/lib/i18n/context");
+    const { MoodChart } = await import("../mood-chart");
+
+    const html = renderToStaticMarkup(
+      <I18nProvider initialLocale="en">
+        <MoodChart mini />
+      </I18nProvider>,
+    );
+    // The mini wrapper paints data-slot="chart-mini" with rounded-md.
+    const wrapper = html.match(
+      /<div[^>]*data-slot="chart-mini"[^>]*class="([^"]+)"/,
+    );
+    expect(wrapper).not.toBeNull();
+    const cls = wrapper?.[1] ?? "";
+    expect(cls).toContain("rounded-md");
+    expect(cls).not.toMatch(/\brounded-xl\b/);
+  });
 });
diff --git a/src/components/charts/mood-chart.tsx b/src/components/charts/mood-chart.tsx
index 3910782de..c277339e6 100644
--- a/src/components/charts/mood-chart.tsx
+++ b/src/components/charts/mood-chart.tsx
@@ -536,7 +536,17 @@ export function MoodChart({
       // in the trends row. The mini override gives mood the same
       // `~p-2` shell HealthChart uses so the chart series anchor
       // at the same top edge across BP / weight / mood tiles.
-      className={mini ? "gap-1 py-2 shadow-none" : undefined}
+      //
+      // D-H5 follow-up — the Card primitive carries `rounded-xl
+      // border bg-card shadow-sm` by default. HealthChart mini
+      // paints `rounded-md border bg-card` (no shadow). Without an
+      // explicit `rounded-md` override the mood tile painted a
+      // visibly heavier corner radius than BP / weight in the same
+      // row. Align to the `rounded-md` shell so the three trend
+      // tiles share one corner radius.
+      className={
+        mini ? "gap-1 rounded-md py-2 shadow-none" : undefined
+      }
     >
       <CardHeader
         className={