chore(charts): apply responsive aspect-ratio and height var across the chart surface

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

@@ -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}>

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}

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}

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)" />