From 4cfae93a0d6dd88fb16c3d77ec29667939d20504 Mon Sep 17 00:00:00 2001 From: Tudor Sitaru Date: Tue, 19 May 2026 14:10:16 +0100 Subject: [PATCH] fix(chart): collapse empty space below desktop chart MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .chartWrapper had height:100% but its parent .chartOuter (a flex column) had no explicit height — so the canvas couldn't resolve a real height and fell back to Chart.js's small default, leaving a big empty band between the plot and the "View raw year-by-year data" disclosure on desktop. Give .chartOuter height:100% so it fills the 280px .chartContainer, and switch .chartWrapper to flex:1 1 auto / min-height:0 so the canvas fills whatever space remains after the (primary-only) trend banner. Mobile's explicit .chartWrapper height:220px still wins inside the responsive override. Co-Authored-By: Claude Opus 4.7 --- nextjs-app/components/PerformanceChart.module.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/nextjs-app/components/PerformanceChart.module.css b/nextjs-app/components/PerformanceChart.module.css index a35525f..b880d32 100644 --- a/nextjs-app/components/PerformanceChart.module.css +++ b/nextjs-app/components/PerformanceChart.module.css @@ -2,6 +2,11 @@ display: flex; flex-direction: column; gap: 0.75rem; + /* Fill the parent .chartContainer (which carries the height) so the + canvas wrapper below can take 100% of a real number. Without this, + .chartOuter auto-sizes to content and the canvas falls back to + Chart.js's tiny default — leaving empty space below the chart. */ + height: 100%; } .trendSummary { @@ -17,7 +22,12 @@ .chartWrapper { width: 100%; - height: 100%; + /* flex:1 instead of height:100% so the trend banner / chip strip + above can take their natural size and the canvas fills the rest of + the .chartOuter column. min-height:0 keeps flex from refusing to + shrink the canvas below its content size. */ + flex: 1 1 auto; + min-height: 0; position: relative; }