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.
This commit is contained in:
Marc-André Bombeck committed 2026-05-16 02:35:00 +02:00
1 parent 8144281d1e
commit d8229c26db
2 files changed
+36 -1

No files matched your search

@@ -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/);
});
});
+11 -1
View File
@@ -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={