Merge pull request 'fix(compare): expert should-fixes S1-S4, S6 (S5/S7 closed by verification)' (#55) from fix/expert-signoff-shouldfixes into main

Reviewed-on: #55

nextjs-app/components/ComparisonChart.module.css

@@ -1,23 +1,16 @@
-/* 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. */
+/* Chart wrapper: chips (mobile) above, canvas filling the rest of the
+   parent .chartContainer, whose fixed height drives Chart.js sizing via
+   maintainAspectRatio: false. */
 .wrapper {
     display: flex;
     flex-direction: column;
+    height: 100%;
 }
 
 .canvasBox {
     position: relative;
-    height: 380px;
-}
-
-@media (max-width: 640px) {
-    .canvasBox {
-        height: 280px;
-    }
+    flex: 1 1 auto;
+    min-height: 0;
 }
 
 /* School chips: mobile-only legend + tap-to-focus control. Desktop keeps

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

@@ -60,10 +60,18 @@
   margin: 0 0 1rem;
 }
 
-/* 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. */
+/* 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. */
 .chartBox {
-  min-height: 0;
+  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;
+  }
 }