mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
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:
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/);
|
||||
});
|
||||
});
|
||||
@@ -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={
|
||||
|
||||
Reference in new issue
Block a user