tom/HealthLog
1
0 Fork 0
mirror of https://github.com/MBombeck/HealthLog.git synced 2026-11-11 13:52:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(insights): raise the trends-row chart-slot wrapper so the annotation no longer overlaps

Browse Source 
The 140 px slot matched the mini-chart's internal painting area but
not the mini-card shell's header + padding above it. The roughly
34 px the shell adds overflowed the slot and pushed the chart
envelope down into the TrendAnnotation row below — visible as text
sitting on top of the chart. Raise the wrapper to 180 px so the
full envelope (header + chart band) lives inside the slot and the
three tiles share one annotation baseline.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.7 committed 2026-05-28 21:42:20 +02:00
1 parent 3b7c72e1d0
commit 6e204f1a25
2 files changed
+14 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/insights/__tests__/trends-row.test.tsx
+11 -5
View File
@@ -89,19 +89,25 @@ describe("<TrendsRow>", () => {
expect(slots.length).toBe(3);
});
it("pins every chart slot to h-[140px] so Recharts mounts with a known size (CLS fix)", () => {
it("pins every chart slot to h-[180px] so Recharts mounts with a known size (CLS fix)", () => {
// v1.4.36 W2 — without an explicit height the Recharts
// ResponsiveContainer mounts with width=-1 height=-1 and emits a
// console warning per chart. The mood card also drifted taller
// than BP / weight on hydration. Pinning the wrapper at 140 px
// matches the mini-chart's internal default; the row paints with
// zero layout shift.
// than BP / weight on hydration.
//
// v1.5.4.x — wrapper raised from 140 to 180 px. The 140 px slot
// matched the chart's internal painting area, but the mini-mode
// card shell adds ~34 px of header + padding above it. The
// resulting overflow pushed the chart envelope down into the
// TrendAnnotation row below — visible as text sitting on top of
// the chart. 180 px absorbs the full envelope so the three tiles
// share one chart-band baseline without overlap.
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(/h-\[140px\]/);
expect(slot).toMatch(/h-\[180px\]/);
}
});
src/components/insights/trends-row.tsx
+3 -3
View File
@@ -138,7 +138,7 @@ export function TrendsRow({
wrapper (which carries a heavier shell on a default
shadcn Card) lines up with the BP/weight tiles' lighter
shell. Both chart types ship the same data-slot now. */}
<div data-slot="trends-row-chart-slot" className="h-[140px] shrink-0">
<div data-slot="trends-row-chart-slot" className="h-[180px] shrink-0">
<HealthChartDynamicMini
types={["BLOOD_PRESSURE_SYS", "BLOOD_PRESSURE_DIA"]}
title={t("charts.bloodPressure")}
@@ -161,7 +161,7 @@ export function TrendsRow({
data-metric="weight"
className="flex h-full flex-col gap-2 md:min-h-[300px]"
>
<div data-slot="trends-row-chart-slot" className="h-[140px] shrink-0">
<div data-slot="trends-row-chart-slot" className="h-[180px] shrink-0">
<HealthChartDynamicMini
types={["WEIGHT"]}
title={t("charts.weight")}
@@ -183,7 +183,7 @@ export function TrendsRow({
data-metric="mood"
className="flex h-full flex-col gap-2 md:min-h-[300px]"
>
<div data-slot="trends-row-chart-slot" className="h-[140px] shrink-0">
<div data-slot="trends-row-chart-slot" className="h-[180px] shrink-0">
<MoodChart
title={t("charts.mood")}
mini