fix(chart): collapse empty space below desktop chart

.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 <noreply@anthropic.com>

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