diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index 6365249..0ea36c2 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/nextjs-app/components/SchoolDetailView.module.css
@@ -855,7 +855,10 @@
 /* Charts Section */
 .chartContainer {
     width: 100%;
-    height: 280px;
+    /* Taller on desktop so the trend lines have vertical room to separate
+       and read clearly. Mobile overrides this to height:auto below (the
+       max-width:768px query), so this only affects desktop. */
+    height: 380px;
     position: relative;
 }
 
diff --git a/nextjs-app/components/SecondarySchoolDetailView.module.css b/nextjs-app/components/SecondarySchoolDetailView.module.css
index 6f9d85d..a4f02e0 100644
--- a/nextjs-app/components/SecondarySchoolDetailView.module.css
+++ b/nextjs-app/components/SecondarySchoolDetailView.module.css
@@ -490,7 +490,10 @@
 /* ── Charts & Map ────────────────────────────────────── */
 .chartContainer {
     width: 100%;
-    height: 280px;
+    /* Taller on desktop so the trend lines have vertical room to separate
+       and read clearly. Mobile overrides this to height:auto below (the
+       max-width:768px query), so this only affects desktop. */
+    height: 380px;
     position: relative;
 }