From 3ed78a032bd5606c876d536a4531afafc49de4a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 15 May 2026 16:30:18 +0200
Subject: [PATCH] fix(charts): align MoodChart height with the rest of the
 trend strip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MoodChart rendered at 280 px while every sibling chart on the dashboard
card row (weight, BP, pulse, body fat, sleep, steps, medication
compliance) renders at 240 px. The 40-px outlier broke vertical rhythm
when scrolling past the trend strip — the row swelled when it hit the
mood card.

Consume CHART_HEIGHT_PX from the shared constants module so the empty
state and the populated chart now stride with the rest of the row. Bump
the populated-chart override from 280 to 240 in the same edit.
---
 src/components/charts/mood-chart.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/charts/mood-chart.tsx b/src/components/charts/mood-chart.tsx
index bdb5648cd..44046bad7 100644
--- a/src/components/charts/mood-chart.tsx
+++ b/src/components/charts/mood-chart.tsx
@@ -37,6 +37,7 @@ import { ChartOverlayControls } from "./chart-overlay-controls";
 import { useChartOverlayPrefs } from "@/hooks/use-chart-overlay-prefs";
 import { useViewportWidth } from "@/hooks/use-viewport-width";
 import { chooseTickInterval } from "@/lib/charts/x-axis-density";
+import { CHART_HEIGHT_PX } from "@/lib/charts/constants";
 
 // --- Types ---
 
@@ -622,14 +623,17 @@ export function MoodChart({
           </div>
         ) : chartData.length < 3 ? (
           // v1.4.16 B1a — sparse-data placeholder consistent with the
-          // BP/weight/pulse charts.
+          // BP/weight/pulse charts. Height tracks the chart strip's
+          // shared CHART_HEIGHT_PX so the empty state preserves the
+          // trend-row rhythm (v1.4.27 — was 280, now 240 to match every
+          // other dashboard chart card).
           <ChartEmptyState
             title={t("charts.emptyStateTitle")}
             description={t("charts.emptyStateDescription")}
-            height={280}
+            height={CHART_HEIGHT_PX}
           />
         ) : (
-          <div className={`${mini ? "h-[140px]" : "h-[280px]"} touch-pan-y`}>
+          <div className={`${mini ? "h-[140px]" : "h-[240px]"} touch-pan-y`}>
             <ResponsiveContainer width="100%" height="100%">
               <ComposedChart
                 data={chartDataWithCompare ?? chartData}