From 3cd04533beef598d7580e286f858922962c19a61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 5 Jun 2026 13:39:26 +0200
Subject: [PATCH] style(insights): tighten mood chart heights and unify the
 overview rhythm

The mood line chart plots a 1-5 score band; the 240/280 px full-mode height
left a dead strip below the line on the mood subpage. Trim the default to
200/220 px (a per-mount --chart-height override still wins) and lower the
mood-correlation scatter height so the cards fit their content without the
empty gap.

The overview used space-y-8 between top-level blocks while the vitals wrap used
space-y-6, reading as two tiers. Unify to space-y-6 for one consistent vertical
rhythm down the page, in line with the denser-Insights direction.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/app/insights/page.tsx                               | 7 ++++++-
 src/components/charts/mood-chart.tsx                    | 8 +++++++-
 src/components/insights/mood/mood-correlation-cards.tsx | 2 +-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/app/insights/page.tsx b/src/app/insights/page.tsx
index 958792a4d..7258f99b1 100644
--- a/src/app/insights/page.tsx
+++ b/src/app/insights/page.tsx
@@ -305,7 +305,12 @@ export default function InsightsPage() {
   // removed in v1.12.4 — the tab-strip regenerate button is the single
   // affordance. The generic disclaimer lives once in the layout-shell footer.
   return (
-    <div className="space-y-8">
+    // v1.12.7 (L3) — one consistent vertical rhythm down the overview. The
+    // page used `space-y-8` (32 px) between top-level blocks while the vitals
+    // wrap used `space-y-6` (24 px), so the overview read as two tiers. Unify
+    // to `space-y-6` — it matches the vitals wrap and tightens the overview in
+    // line with the "Insights gives away too much space" direction.
+    <div className="space-y-6">
       <HeroStrip
         briefing={briefingPayload}
         updatedAt={heroStripUpdatedAt}
diff --git a/src/components/charts/mood-chart.tsx b/src/components/charts/mood-chart.tsx
index b7bf08981..3a9300da2 100644
--- a/src/components/charts/mood-chart.tsx
+++ b/src/components/charts/mood-chart.tsx
@@ -726,10 +726,16 @@ export function MoodChart({
           )
         ) : (
           <div
+            // v1.12.7 — the mood line plots a 1–5 score band; the former
+            // 240/280 px full-mode height left a tall dead strip below the
+            // line on the mood subpage. Tighten the default to 200/220 px so
+            // the chart fits its content without the empty gap. A per-mount
+            // `--chart-height` override (trends-row mini, etc.) still wins, so
+            // only the unoverridden full-mode mount shrinks.
             className={`${
               mini
                 ? "h-[var(--chart-height,140px)]"
-                : "h-[var(--chart-height,240px)] md:h-[var(--chart-height-md,280px)]"
+                : "h-[var(--chart-height,200px)] md:h-[var(--chart-height-md,220px)]"
             } touch-pan-y`}
           >
             <ResponsiveContainer width="100%" height="100%">
diff --git a/src/components/insights/mood/mood-correlation-cards.tsx b/src/components/insights/mood/mood-correlation-cards.tsx
index f0366ff3a..8e054af06 100644
--- a/src/components/insights/mood/mood-correlation-cards.tsx
+++ b/src/components/insights/mood/mood-correlation-cards.tsx
@@ -128,7 +128,7 @@ function MoodCorrelationCard({
                 ticks: [1, 2, 3, 4, 5],
               }}
               yAxis={{ dataKey: "y", name: t(Y_LABEL_KEY[kind]) }}
-              height={180}
+              height={160}
             />
           </>
         ) : (