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>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.8 committed 2026-06-05 13:40:44 +02:00
1 parent 4be9767428
commit 3cd04533be
3 files changed
+14 -3

No files matched your search

+6 -1
View File
@@ -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}
+7 -1
View File
@@ -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%">
@@ -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}
/>
</>
) : (