From ba497f4ae8c614a50dd8807d52d945fc4733f39b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sat, 27 Jun 2026 17:56:55 +0200 Subject: [PATCH] fix(insights): keep charts from crushing the layout in landscape Fixed-pixel chart bands ate roughly half the screen when a small phone was rotated to landscape. Swap the brittle heights for viewport-relative clamps so the chart envelope holds its previous size on desktop and portrait but shrinks toward a floor on short landscape viewports. Covers the overview trends-row slot and the mood distribution, weekday, and time-of-day charts (with matching skeleton heights). Chart series and styling are untouched; only the container heights flex. --- .../insights/__tests__/trends-row.test.tsx | 9 +++++++-- .../insights/mood/mood-distribution-chart.tsx | 2 +- .../insights/mood/mood-insights-sections.tsx | 12 +++++++++--- .../insights/mood/mood-time-of-day-chart.tsx | 2 +- src/components/insights/mood/mood-weekday-chart.tsx | 2 +- src/components/insights/trends-row.tsx | 9 ++++++++- 6 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/components/insights/__tests__/trends-row.test.tsx b/src/components/insights/__tests__/trends-row.test.tsx index b69b00b9e..c8b18b288 100644 --- a/src/components/insights/__tests__/trends-row.test.tsx +++ b/src/components/insights/__tests__/trends-row.test.tsx @@ -106,7 +106,7 @@ describe("", () => { expect(slots.length).toBe(3); }); - it("pins every chart slot to h-[180px] so Recharts mounts with a known size (CLS fix)", () => { + it("pins every chart slot to a known responsive height so Recharts mounts with a size (CLS fix)", () => { // v1.4.36 W2 — without an explicit height the Recharts // ResponsiveContainer mounts with width=-1 height=-1 and emits a // console warning per chart. The mood card also drifted taller @@ -119,12 +119,17 @@ describe("", () => { // TrendAnnotation row below — visible as text sitting on top of // the chart. 180 px absorbs the full envelope so the three tiles // share one chart-band baseline without overlap. + // + // v1.22.0 — the slot height became `clamp(140px,32vh,180px)` so a + // rotated phone doesn't lose half the screen to the fixed band. The + // 180 px envelope still holds on desktop + portrait (where 32vh + // clears 180 px); only short landscape viewports shrink to the floor. const html = render(); const slots = html.match(/data-slot="trends-row-chart-slot"[^>]*class="[^"]*"/g) ?? []; expect(slots.length).toBe(3); for (const slot of slots) { - expect(slot).toMatch(/h-\[180px\]/); + expect(slot).toMatch(/h-\[clamp\(140px,32vh,180px\)\]/); } }); diff --git a/src/components/insights/mood/mood-distribution-chart.tsx b/src/components/insights/mood/mood-distribution-chart.tsx index 9e1f64f8b..cd11da3cb 100644 --- a/src/components/insights/mood/mood-distribution-chart.tsx +++ b/src/components/insights/mood/mood-distribution-chart.tsx @@ -56,7 +56,7 @@ export function MoodDistributionChart({ // v1.15.14 — bounded compact height (was `aspect-[3/2] min-h-[180px]`, // which ballooned the card on a wide viewport). A fixed band keeps this a // tidy card rather than a dominant block, and matches the weekday sibling. -
+
, + loading: () => ( + + ), }, ); const MoodWeekdayChart = dynamic( @@ -56,7 +58,9 @@ const MoodWeekdayChart = dynamic( })), { ssr: false, - loading: () => , + loading: () => ( + + ), }, ); const MoodTimeOfDayChart = dynamic( @@ -66,7 +70,9 @@ const MoodTimeOfDayChart = dynamic( })), { ssr: false, - loading: () => , + loading: () => ( + + ), }, ); import { MoodTagBreakdown, type MoodTagRow } from "./mood-tag-breakdown"; diff --git a/src/components/insights/mood/mood-time-of-day-chart.tsx b/src/components/insights/mood/mood-time-of-day-chart.tsx index 5a5aa102b..2a8769fc0 100644 --- a/src/components/insights/mood/mood-time-of-day-chart.tsx +++ b/src/components/insights/mood/mood-time-of-day-chart.tsx @@ -78,7 +78,7 @@ export function MoodTimeOfDayChart({ width-constrained), so an aspect ratio derived the height off the full card width and ballooned the chart to ~800px on a wide viewport. A bounded height keeps it the same size as the sibling charts. */} -
+
+