fix(compare): give the trend chart its own definite canvas height so the gap note can't squash it

The chart note (and the 2-row mobile chip legend) lived inside the fixed
360px/420px chartBox and competed with the canvas for it, so a longer
caption — e.g. the new KS4 gap note — shrank the mobile canvas to ~178px
and tripped the e2e >220px guard. The canvas now owns a definite height
(280px mobile / 380px desktop) with chips above and the note flowing
below at natural size, so neither can eat the plot. Verified on staging:
patched canvas renders 280px vs the squashed 178px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB

nextjs-app/components/ComparisonChart.module.css

@@ -1,16 +1,23 @@
-/* Chart wrapper: chips (mobile) above, canvas filling the rest of the
+/* Chart wrapper: chips (mobile) above, then the canvas, then the gap note.
-   parent .chartContainer, whose fixed height drives Chart.js sizing via
+   The canvas has its OWN definite height (Chart.js needs one for
-   maintainAspectRatio: false. */
+   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;
+    height: 380px;
-    min-height: 0;
+}
+
+@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
+/* ComparisonChart owns its own canvas height now (a definite px value per
-   its container's height — which must be *definite*. A min-height alone does
+   breakpoint), with the mobile chip legend above and the gap note below it
-   not resolve the chart wrapper's height:100%, leaving Chart.js to fall back
+   flowing at natural size. This box therefore only needs to not constrain
-   to its ~150px default (a squashed sliver). Give it a real height. */
+   that height — no fixed height, or the note would again eat the plot. */
 .chartBox {
-  height: 420px;
+  min-height: 0;
-}
-
-@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;
-  }
 }