From 32f8a02862be6a1d49f4c3928b17fcf15d4c94cc Mon Sep 17 00:00:00 2001 From: Tudor Date: Tue, 21 Jul 2026 22:05:10 +0100 Subject: [PATCH] fix(detail): give Results Over Time chart more height on desktop The trend chart was capped at 280px tall on desktop, squishing the lines together and making them hard to read. Raise the base .chartContainer height to 380px in both the primary and secondary detail views. Mobile is unaffected: the base value is already overridden to height:auto by the existing max-width:768px query, where PerformanceChart's own .chartWrapper carries the canvas height. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB --- nextjs-app/components/SchoolDetailView.module.css | 5 ++++- nextjs-app/components/SecondarySchoolDetailView.module.css | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) 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; } -- 2.54.0