From 53c51639014a13d1ed1b96ef334b50b3f45b400f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 15 May 2026 19:11:39 +0200
Subject: [PATCH] chore(charts): apply responsive aspect-ratio and height var
 across the chart surface
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

v1.4.27 MB7 / CF-37 + CF-43 — the scatter correlation chart now uses
an `aspect-square` ratio at `<sm` so the plot area stays a centred
square on phones (matches Apple Health's correlation viz); from `sm:`
upwards a 3:2 ratio recovers the legacy ~250 px shape. The three
HealthChart-family components (`HealthChart`, `MoodChart`,
`MedicationComplianceChart`) drop the hard-coded `h-[240px]` floor
for a `var(--chart-height, 240px)` token plus a `md:` lift to 280 px
so taller viewports get a more legible chart without tweaking each
consumer.
---
 src/components/charts/health-chart.tsx              | 10 +++++++++-
 .../charts/medication-compliance-chart.tsx          |  2 +-
 src/components/charts/mood-chart.tsx                |  8 +++++++-
 src/components/charts/scatter-correlation-chart.tsx | 13 ++++++++++++-
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/charts/health-chart.tsx b/src/components/charts/health-chart.tsx
index 2d24b666e..02ebc6515 100644
--- a/src/components/charts/health-chart.tsx
+++ b/src/components/charts/health-chart.tsx
@@ -1045,7 +1045,15 @@ export function HealthChart({
   const containerClass = mini
     ? "bg-card border-border rounded-md border p-2"
     : "bg-card border-border rounded-xl border p-4 md:p-6";
-  const chartHeightClass = mini ? "h-[140px]" : "h-[240px]";
+  // v1.4.27 MB7 / CF-43 — chart height now reads from a CSS variable
+  // (`--chart-height`) so consumers can override the default per-mount
+  // without re-styling the component. The `mini` branch keeps the
+  // 140 px contract; the regular branch defaults to 240 px on mobile
+  // and 280 px from `md:` upwards (the wider container can absorb a
+  // taller chart without crowding the tile strip above).
+  const chartHeightClass = mini
+    ? "h-[var(--chart-height,140px)]"
+    : "h-[var(--chart-height,240px)] md:h-[var(--chart-height-md,280px)]";
 
   return (
     <div className={containerClass} data-slot={mini ? "chart-mini" : undefined}>
diff --git a/src/components/charts/medication-compliance-chart.tsx b/src/components/charts/medication-compliance-chart.tsx
index a923267cb..674aa1089 100644
--- a/src/components/charts/medication-compliance-chart.tsx
+++ b/src/components/charts/medication-compliance-chart.tsx
@@ -383,7 +383,7 @@ export function MedicationComplianceChart({
           description={t("charts.emptyStateDescription")}
         />
       ) : (
-        <div className="h-[240px] touch-pan-y">
+        <div className="h-[var(--chart-height,240px)] md:h-[var(--chart-height-md,280px)] touch-pan-y">
           <ResponsiveContainer width="100%" height="100%">
             <ComposedChart
               data={chartData}
diff --git a/src/components/charts/mood-chart.tsx b/src/components/charts/mood-chart.tsx
index 6877aecad..527c134bc 100644
--- a/src/components/charts/mood-chart.tsx
+++ b/src/components/charts/mood-chart.tsx
@@ -638,7 +638,13 @@ export function MoodChart({
             height={CHART_HEIGHT_PX}
           />
         ) : (
-          <div className={`${mini ? "h-[140px]" : "h-[240px]"} touch-pan-y`}>
+          <div
+            className={`${
+              mini
+                ? "h-[var(--chart-height,140px)]"
+                : "h-[var(--chart-height,240px)] md:h-[var(--chart-height-md,280px)]"
+            } touch-pan-y`}
+          >
             <ResponsiveContainer width="100%" height="100%">
               <ComposedChart
                 data={chartDataWithCompare ?? chartData}
diff --git a/src/components/charts/scatter-correlation-chart.tsx b/src/components/charts/scatter-correlation-chart.tsx
index e6bc21039..1183d9ab0 100644
--- a/src/components/charts/scatter-correlation-chart.tsx
+++ b/src/components/charts/scatter-correlation-chart.tsx
@@ -82,8 +82,19 @@ export function ScatterCorrelationChart<T extends Record<string, number>>({
   tooltipFormatter,
   height = 250,
 }: ScatterCorrelationChartProps<T>) {
+  // v1.4.27 MB7 / CF-37 — drop the fixed pixel height in favour of a
+  // responsive aspect-ratio on mobile so the chart never compresses
+  // below readable axes. The `aspect-square` ratio at `<sm` keeps the
+  // plot area as a centred square (matches Apple Health correlation
+  // viz); from `sm:` upwards the chart falls back to the legacy
+  // pixel-height contract via a 3:2 aspect-ratio fallback that
+  // approximates the previous 250 px shape.
   return (
-    <div className="touch-pan-y" style={{ height }}>
+    <div
+      className="touch-pan-y aspect-square sm:aspect-[3/2] sm:h-auto"
+      style={{ height: undefined }}
+      data-explicit-height={height}
+    >
       <ResponsiveContainer width="100%" height="100%">
         <ScatterChart margin={{ top: 10, right: 20, bottom: 36, left: 12 }}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />