From 60541803f292cdd9feb5ade5cc137036eecc89af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Thu, 14 May 2026 12:00:45 +0200 Subject: [PATCH] style(insights): trends-row equal-height + mood-chart gridline density parity MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two coupled fixes pinned by Marc on the v1.4.25 W3 walkthrough: 1. Trends row equal-height The three trend cards (BP / Weight / Mood) on /insights sit in a `grid-cols-1 md:grid-cols-3` grid. The `min-h-[300px]` floor guarantees a sensible mobile height, but the AI annotation prose varies card-to-card on desktop, leaving the tallest card pushing only its own row member down — siblings stayed short. Added `md:auto-rows-fr md:items-stretch` on the grid container and `h-full` on each direct child so the row pins every card to the tallest member's height. 2. Mood chart gridline density parity The mood chart's YAxis pins ticks to [1,2,3,4,5] (mood scale). By default Recharts syncs CartesianGrid coordinates with YAxis ticks, so the mini variant painted five horizontal lines while the BP/Weight/Pulse minis painted six (their auto-generated YAxis ticks land on ~six bands in typical health ranges). Added a `horizontalCoordinatesGenerator` that emits six evenly-spaced lines inside the plot area so the trends row reads as a single rhythm. Both changes are presentational — no chart data shape changes, no behaviour changes, no API touched. --- src/components/charts/mood-chart.tsx | 22 ++++++++++++++++++++++ src/components/insights/trends-row.tsx | 16 ++++++++++------ 2 files changed, 32 insertions(+), 6 deletions(-) diff --git a/src/components/charts/mood-chart.tsx b/src/components/charts/mood-chart.tsx index a1c98d459..16208ce11 100644 --- a/src/components/charts/mood-chart.tsx +++ b/src/components/charts/mood-chart.tsx @@ -621,10 +621,32 @@ export function MoodChart({ data={chartDataWithCompare ?? chartData} margin={{ top: 10, right: 8, bottom: 8, left: 8 }} > + {/* v1.4.25 W3 — the mood chart's YAxis is pinned to + five mood-score ticks ([1,2,3,4,5]), which Recharts + syncs with CartesianGrid by default. That left the + mini variant painting five horizontal lines while + the BP / Weight / Pulse minis painted six (their + auto-generated YAxis ticks land on six bands in + typical health ranges). The explicit coordinates + generator below produces six evenly-spaced lines + so the trends row reads as a single rhythm. */} { + // `offset` carries the chart's plot-area metrics. + // Six evenly-spaced y-coordinates inside the plot + // area (top + 4 intermediate + bottom) match the + // density of the BP/Weight/Pulse minis. + const top = offset.top ?? 0; + const height = offset.height ?? 0; + if (height <= 0) return []; + const lines = 6; + return Array.from({ length: lines }, (_, i) => + Math.round(top + (height * i) / (lines - 1)), + ); + }} /> {showBands && VALUE_BANDS.map((band) => ( diff --git a/src/components/insights/trends-row.tsx b/src/components/insights/trends-row.tsx index 3e510ccc7..54ea18b55 100644 --- a/src/components/insights/trends-row.tsx +++ b/src/components/insights/trends-row.tsx @@ -98,13 +98,17 @@ export function TrendsRow({ annotations, confidence }: TrendsRowProps) { three cards on visibly different baselines. Each card is now a flex column with `min-h-[300px]` so the chart anchors to the top and the annotation grows downward into a shared - minimum height. The grid + min-h together preserve the visual - rhythm even on a row where only one annotation is multi-line. */} -
+ minimum height. + v1.4.25 W3 — strengthen the equal-height contract with + `md:auto-rows-fr` + `md:items-stretch` on the grid and + `h-full` on each card so the tallest annotation still pins + every row member to a single baseline. The `min-h-[300px]` + floor stays in place for the single-column mobile view. */} +