.chartWrapper had height:100% but its parent .chartOuter (a flex
column) had no explicit height — so the canvas couldn't resolve a
real height and fell back to Chart.js's small default, leaving a
big empty band between the plot and the "View raw year-by-year data"
disclosure on desktop.
Give .chartOuter height:100% so it fills the 280px .chartContainer,
and switch .chartWrapper to flex:1 1 auto / min-height:0 so the
canvas fills whatever space remains after the (primary-only) trend
banner. Mobile's explicit .chartWrapper height:220px still wins
inside the responsive override.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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>
The Results Over Time chart on the school detail page was overcrowded
on phones — 5-item legend wrapping over the plot area, a hidden right
y-axis still rendered for the (collapsed) progress series, fixed
0–100 percentage scale that flattened all variation, angled x-axis
labels eating vertical space.
At ≤640px the chart now renders one metric at a time, selected via a
chip strip above the plot. No more legend. No more dual y-axis. The
y-axis auto-tightens around the actual data range so variation is
visible (a school sitting in the 70–90% band now uses a 65–95 axis
instead of squashing onto a 0–100 line). A small subtitle above the
chips sets the subject context ("KS2 SATs · Reading, Writing & Maths"
or "GCSE results · Year 11") so chip labels can describe the *view*
rather than re-stating the subject.
Chip labels are spelled out in parent-facing language — no internal
shorthand like "RWM":
Primary (KS2): At expected level (default)
Above expected level
Pupil progress (shows 3 series + mini-legend)
Secondary (KS4): Attainment 8 (default)
English & Maths grade 4+
Progress 8
Chips disable themselves (greyed, with a "No data for this school"
title) when the underlying series has no data points. Desktop
behaviour is unchanged — the full multi-series chart with dual y-axis
still renders >640px.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
History chart
- Strip the redundant school-name title (already the page heading)
- Default to 2 visible lines: Reading, Writing & Maths expected % (teal,
bold) + Exceeding (gold, lighter); progress score lines hidden by
default, togglable via legend
- Add dashed national average reference line for RWM (primary) or
Attainment 8 (secondary) so the school's trajectory is always in
context
- Add trend summary chip above the chart computed from the data
("↓ Peaked at 90% (2016/17), currently 70%")
- Add COVID footnote when 2019/20 and 2020/21 data is absent
Ofsted section
- Collapse the four identical "Outstanding / Outstanding / Outstanding /
Outstanding" boxes into a single prose line when all sub-grades match
the overall verdict; show individual cards only when grades differ
SATs sub-metrics
- DeltaChip vs national average on Expected level row for Reading,
Writing and Maths (national averages already in the API response)
Admissions
- Fix label: "Year 3 places per year" → "Reception places per year" for
primary schools
Pupils & Inclusion
- DeltaChip + national avg hint on Eligible for pupil premium and
Pupils receiving SEN support (both keys present in /api/national-averages)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Migrate from vanilla JavaScript SPA to Next.js 16 with App Router
- Add server-side rendering for all pages (Home, Compare, Rankings)
- Create individual school pages with dynamic routing (/school/[urn])
- Implement Chart.js and Leaflet map integrations
- Add comprehensive SEO with sitemap, robots.txt, and JSON-LD
- Set up Docker multi-service architecture (PostgreSQL, FastAPI, Next.js)
- Update CI/CD pipeline to build both backend and frontend images
- Fix Dockerfile to include devDependencies for TypeScript compilation
- Add Jest testing configuration
- Implement performance optimizations (code splitting, caching)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Tudor Sitaru