From 763aef09f85211512e851eb77f22515a70a9b890 Mon Sep 17 00:00:00 2001
From: Tudor Sitaru <tudor.sitaru@gmail.com>
Date: Tue, 19 May 2026 13:40:11 +0100
Subject: [PATCH] fix(chart): stop "View raw data" link overlapping the mobile
 chart canvas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous commit added the chip strip and subtitle inside the
.chartOuter, but .chartContainer on the parent SchoolDetailView still
had a fixed height: 220px. With the new content stacking above the
canvas the chart + COVID footnote overflowed past 220px, and the
<details> "View raw year-by-year data" disclosure (rendered just
after the container) landed on top of the plot. It also pushed the
COVID footnote out of the card onto the page background.

- .chartContainer at ≤640px now flows naturally (height: auto)
- .chartWrapper at ≤640px gets an explicit 220px height so the canvas
  itself still has a known size for Chart.js to render into.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 nextjs-app/components/PerformanceChart.module.css | 6 ++++++
 nextjs-app/components/SchoolDetailView.module.css | 6 +++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/nextjs-app/components/PerformanceChart.module.css b/nextjs-app/components/PerformanceChart.module.css
index 857c6d5..a35525f 100644
--- a/nextjs-app/components/PerformanceChart.module.css
+++ b/nextjs-app/components/PerformanceChart.module.css
@@ -118,6 +118,12 @@
   .mobileChips {
     display: block;
   }
+  /* Canvas needs an explicit height now that the parent .chartContainer
+     flows naturally (its old fixed 220px was clipping the chip strip and
+     pushing the disclosure link onto the plot area). */
+  .chartWrapper {
+    height: 220px;
+  }
   /* The desktop "click the legend to show progress" hint is irrelevant
      once the chip row is the disclosure mechanism. */
   .chartHint {
diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index 3f42cd8..a3612fc 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/nextjs-app/components/SchoolDetailView.module.css
@@ -880,8 +880,12 @@
         grid-template-columns: 1fr;
     }
 
+    /* PerformanceChart on mobile now stacks: trend banner → chip subtitle →
+       chip row → canvas → mini-legend → COVID footnote. The container must
+       flow naturally instead of clipping to a fixed 220px — PerformanceChart's
+       own .chartWrapper carries the canvas height. */
     .chartContainer {
-        height: 220px;
+        height: auto;
     }
 
     .mapContainer {