nextjs-app/components/ComparisonChart.module.css

@@ -1,16 +1,23 @@
-/* Chart wrapper: chips (mobile) above, canvas filling the rest of the
-   parent .chartContainer, whose fixed height drives Chart.js sizing via
-   maintainAspectRatio: false. */
+/* Chart wrapper: chips (mobile) above, then the canvas, then the gap note.
+   The canvas has its OWN definite height (Chart.js needs one for
+   maintainAspectRatio: false); the chips and the note flow at their natural
+   size around it rather than competing with it for a fixed outer height —
+   so a longer note (e.g. the KS4 gap caption) or a two-row chip legend can
+   never squash the chart. */
 .wrapper {
     display: flex;
     flex-direction: column;
-    height: 100%;
 }
 
 .canvasBox {
     position: relative;
-    flex: 1 1 auto;
-    min-height: 0;
+    height: 380px;
+}
+
+@media (max-width: 640px) {
+    .canvasBox {
+        height: 280px;
+    }
 }
 
 /* School chips: mobile-only legend + tap-to-focus control. Desktop keeps

nextjs-app/components/compare/TrendsExplorer.module.css

@@ -60,18 +60,10 @@
   margin: 0 0 1rem;
 }
 
-/* ComparisonChart runs Chart.js with maintainAspectRatio:false, so it fills
-   its container's height — which must be *definite*. A min-height alone does
-   not resolve the chart wrapper's height:100%, leaving Chart.js to fall back
-   to its ~150px default (a squashed sliver). Give it a real height. */
+/* ComparisonChart owns its own canvas height now (a definite px value per
+   breakpoint), with the mobile chip legend above and the gap note below it
+   flowing at natural size. This box therefore only needs to not constrain
+   that height — no fixed height, or the note would again eat the plot. */
 .chartBox {
-  height: 420px;
-}
-
-@media (max-width: 640px) {
-  /* Taller on mobile: the mobile-only school chips sit above the canvas and
-     wrap to two rows for 3+ schools, so the plot keeps a usable height. */
-  .chartBox {
-    height: 360px;
-  }
+  min-height: 0;
 }