The mockup's Explore trends is the measure picker + chart only. Drops the year-by-year table and the now-unused progress-band plumbing that fed it.
2. Mobile measure-first cards (the "significantly different" gap)
Analysis (staging vs the committed mockups): desktop is faithful; the drift was entirely mobile. The grid sections (At a glance, Ofsted, Getting a place, Who goes there) collapsed generically on mobile — grey label pills, full school names wrapping to 3 lines, no colour dots — making the page ~2x the mockup's height. The dot-strip academics section was already fine.
Fix: each measure is wrapped in a <Measure> that is display: contents on desktop (its label + cells still flow into the shared aligned grid — desktop unchanged) and a white card on mobile with compact [colour dot][short name][value + chip] rows, matching the mobile mockup. The sticky school bar becomes scrollable short-name pills on mobile. Adds a shortName() util.
The display: contents mechanism and the real content shapes (report-card cell, badges, %+chip rows) were validated via static previews at both widths before committing.
Two mockup-fidelity fixes for the compare screen.
## 1. Remove the Explore-trends data table
The mockup's Explore trends is the measure picker + chart only. Drops the year-by-year table and the now-unused progress-band plumbing that fed it.
## 2. Mobile measure-first cards (the "significantly different" gap)
Analysis (staging vs the committed mockups): **desktop is faithful**; the drift was entirely mobile. The grid sections (At a glance, Ofsted, Getting a place, Who goes there) collapsed generically on mobile — grey label pills, full school names wrapping to 3 lines, no colour dots — making the page ~2x the mockup's height. The dot-strip academics section was already fine.
Fix: each measure is wrapped in a `<Measure>` that is `display: contents` on desktop (its label + cells still flow into the shared aligned grid — desktop unchanged) and a **white card on mobile** with compact `[colour dot][short name][value + chip]` rows, matching the mobile mockup. The sticky school bar becomes scrollable short-name pills on mobile. Adds a `shortName()` util.
The `display: contents` mechanism and the real content shapes (report-card cell, badges, %+chip rows) were validated via static previews at both widths before committing.
## Tests
81 frontend tests (3 new: shortName + mobile cell tag) · tsc clean.
## Note
An e2e mobile height guard would be a good follow-up (assert the page is in the compact band), but staging must redeploy first to measure it.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
The mockup's Explore trends section is the measure picker + chart only —
no data table. Removes the table (and the now-unused progressBand / band
chip / formatMetricValue plumbing that only fed it).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
This PR removes the year-by-year data table from the Explore trends compare component, keeping only the measure picker and chart, per the mockup. The removal is clean: the CSS module classes (.tableWrapper, .table, .yearCell) are deleted alongside their only consumer, unused imports (progressBand, Chip, sectionStyles, formatAcademicYear, formatMetricValue, metricKind) and dead constants (PROGRESS_CI, BAND_LABEL, years/ciKeys) are all removed together, and no other component, CSS module, or e2e test references the deleted table or its identifiers.
✅ No issues found.
## 🤖 AI Code Review (Claude Code)
This PR removes the year-by-year data table from the Explore trends compare component, keeping only the measure picker and chart, per the mockup. The removal is clean: the CSS module classes (.tableWrapper, .table, .yearCell) are deleted alongside their only consumer, unused imports (progressBand, Chip, sectionStyles, formatAcademicYear, formatMetricValue, metricKind) and dead constants (PROGRESS_CI, BAND_LABEL, years/ciKeys) are all removed together, and no other component, CSS module, or e2e test references the deleted table or its identifiers.
✅ No issues found.
The grid sections (At a glance, Ofsted, Getting a place, Who goes there)
collapsed generically on mobile — grey label pills, full names wrapping
to 3 lines, no dots — making the page ~2x the mockup's height and
'significantly different' from the mobile design.
Each measure is now wrapped in a <Measure> that is display:contents on
desktop (so the label + cells still flow into the shared aligned grid,
unchanged) and a white card on mobile with compact [dot][short name]
[value] rows — matching the mobile mockup. The sticky school bar becomes
scrollable short-name pills on mobile too. Adds a shortName() util.
Desktop layout is unchanged (display:contents dissolves the wrapper).
Validated the card mechanism and real content shapes (report-card cell,
badges, %+chip rows) via static previews at both widths.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
tudor
changed title from fix(compare): remove data table from Explore trends (match mockup) to fix(compare): match mockups — remove trends table + mobile measure-first cards2026-07-15 06:50:24 +00:00
This PR reworks the compare page for a measure-first mobile layout: a new Measure wrapper (which dissolves to display:contents at desktop widths) replaces bare RowLabel usage across all compare sections, a shortName() utility abbreviates school names for compact mobile tags/chips, and the now-redundant year-by-year data table in TrendsExplorer is removed along with its unused imports. JSX structure, CSS selectors, and test coverage (including the new shortName unit tests and a CompareOfsted mobile-tag test) all check out consistently across the changed files, and no backend, CI, or data-pipeline code is touched.
✅ No issues found.
## 🤖 AI Code Review (Claude Code)
This PR reworks the compare page for a measure-first mobile layout: a new `Measure` wrapper (which dissolves to `display:contents` at desktop widths) replaces bare `RowLabel` usage across all compare sections, a `shortName()` utility abbreviates school names for compact mobile tags/chips, and the now-redundant year-by-year data table in TrendsExplorer is removed along with its unused imports. JSX structure, CSS selectors, and test coverage (including the new `shortName` unit tests and a `CompareOfsted` mobile-tag test) all check out consistently across the changed files, and no backend, CI, or data-pipeline code is touched.
✅ No issues found.
tudor
merged commit 19b41b6999 into main2026-07-15 07:17:08 +00:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Two mockup-fidelity fixes for the compare screen.
1. Remove the Explore-trends data table
The mockup's Explore trends is the measure picker + chart only. Drops the year-by-year table and the now-unused progress-band plumbing that fed it.
2. Mobile measure-first cards (the "significantly different" gap)
Analysis (staging vs the committed mockups): desktop is faithful; the drift was entirely mobile. The grid sections (At a glance, Ofsted, Getting a place, Who goes there) collapsed generically on mobile — grey label pills, full school names wrapping to 3 lines, no colour dots — making the page ~2x the mockup's height. The dot-strip academics section was already fine.
Fix: each measure is wrapped in a
<Measure>that isdisplay: contentson desktop (its label + cells still flow into the shared aligned grid — desktop unchanged) and a white card on mobile with compact[colour dot][short name][value + chip]rows, matching the mobile mockup. The sticky school bar becomes scrollable short-name pills on mobile. Adds ashortName()util.The
display: contentsmechanism and the real content shapes (report-card cell, badges, %+chip rows) were validated via static previews at both widths before committing.Tests
81 frontend tests (3 new: shortName + mobile cell tag) · tsc clean.
Note
An e2e mobile height guard would be a good follow-up (assert the page is in the compact band), but staging must redeploy first to measure it.
🤖 Generated with Claude Code
https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
🤖 AI Code Review (Claude Code)
This PR removes the year-by-year data table from the Explore trends compare component, keeping only the measure picker and chart, per the mockup. The removal is clean: the CSS module classes (.tableWrapper, .table, .yearCell) are deleted alongside their only consumer, unused imports (progressBand, Chip, sectionStyles, formatAcademicYear, formatMetricValue, metricKind) and dead constants (PROGRESS_CI, BAND_LABEL, years/ciKeys) are all removed together, and no other component, CSS module, or e2e test references the deleted table or its identifiers.
✅ No issues found.
fix(compare): remove data table from Explore trends (match mockup)to fix(compare): match mockups — remove trends table + mobile measure-first cards🤖 AI Code Review (Claude Code)
This PR reworks the compare page for a measure-first mobile layout: a new
Measurewrapper (which dissolves todisplay:contentsat desktop widths) replaces bareRowLabelusage across all compare sections, ashortName()utility abbreviates school names for compact mobile tags/chips, and the now-redundant year-by-year data table in TrendsExplorer is removed along with its unused imports. JSX structure, CSS selectors, and test coverage (including the newshortNameunit tests and aCompareOfstedmobile-tag test) all check out consistently across the changed files, and no backend, CI, or data-pipeline code is touched.✅ No issues found.