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