The Ofsted Report Card grade boxes looked misaligned with inconsistent font sizes:
Safeguarding "Met" rendered as a small 0.8125rem inline pill while grade values like "Strong" were 1.25rem full-width chips.
Category labels wrap to one or two lines (e.g. INCLUSION vs CURRICULUM & TEACHING), pushing each value chip to a different vertical position — nothing lined up.
Two-line values like "Expected standard" produced a taller box than the rest.
Fix
.metricCard/.metricValue are shared across many sections (finance, phonics, admissions…), so rather than touching the globals I added a scoped .gradeGrid modifier applied only to the Ofsted grade grids (Report Card + legacy OEIF layouts, in both SchoolDetailView and SecondarySchoolDetailView — five grids total):
Labels reserve two lines (min-height, vertically centered) so single- and double-line labels put their chips on the same baseline.
Every value chip shares one font size (1rem), padding and min-height, is bottom-aligned (margin-top: auto), and wraps long text inside an equal-height chip (max-width: 100%).
Verification
tsc --noEmit passes.
Rendered a pixel-accurate mock of the exact markup + styles and screenshotted before/after — the after row shows uniform chip size, matched fonts and aligned baselines.
Visual-only CSS change (no DOM text/structure or behaviour changed), so the e2e/ journeys don't require updates.
## Problem
The Ofsted Report Card grade boxes looked misaligned with inconsistent font sizes:
- Safeguarding **"Met"** rendered as a small `0.8125rem` inline pill while grade values like **"Strong"** were `1.25rem` full-width chips.
- Category labels wrap to one or two lines (e.g. `INCLUSION` vs `CURRICULUM & TEACHING`), pushing each value chip to a different vertical position — nothing lined up.
- Two-line values like **"Expected standard"** produced a taller box than the rest.
## Fix
`.metricCard`/`.metricValue` are shared across many sections (finance, phonics, admissions…), so rather than touching the globals I added a scoped `.gradeGrid` modifier applied only to the Ofsted grade grids (Report Card + legacy OEIF layouts, in both `SchoolDetailView` and `SecondarySchoolDetailView` — five grids total):
- Labels reserve two lines (`min-height`, vertically centered) so single- and double-line labels put their chips on the same baseline.
- Every value chip shares one font size (`1rem`), padding and `min-height`, is bottom-aligned (`margin-top: auto`), and wraps long text inside an equal-height chip (`max-width: 100%`).
## Verification
- `tsc --noEmit` passes.
- Rendered a pixel-accurate mock of the exact markup + styles and screenshotted before/after — the after row shows uniform chip size, matched fonts and aligned baselines.
Visual-only CSS change (no DOM text/structure or behaviour changed), so the `e2e/` journeys don't require updates.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
The grade boxes rendered inconsistently: Safeguarding "Met" was a small
0.8125rem inline pill while grade values ("Strong") were 1.25rem full-width
chips, and because category labels wrap to one or two lines each value sat at
a different vertical position. Two-line values like "Expected standard" also
produced a taller box.
Add a scoped `.gradeGrid` modifier (Report Card + OEIF grids in both the
primary and secondary detail views) that reserves two label lines so every
chip shares a baseline, and gives all value chips one font size, padding and
min-height — long text wraps inside an equal-height chip via max-width:100%.
Scoped rather than touching the shared `.metricCard`/`.metricValue` used by
the finance, phonics and admissions sections.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
tudor
merged commit e4c8b86fe7 into main2026-07-20 21:32:45 +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.
Problem
The Ofsted Report Card grade boxes looked misaligned with inconsistent font sizes:
0.8125reminline pill while grade values like "Strong" were1.25remfull-width chips.INCLUSIONvsCURRICULUM & TEACHING), pushing each value chip to a different vertical position — nothing lined up.Fix
.metricCard/.metricValueare shared across many sections (finance, phonics, admissions…), so rather than touching the globals I added a scoped.gradeGridmodifier applied only to the Ofsted grade grids (Report Card + legacy OEIF layouts, in bothSchoolDetailViewandSecondarySchoolDetailView— five grids total):min-height, vertically centered) so single- and double-line labels put their chips on the same baseline.1rem), padding andmin-height, is bottom-aligned (margin-top: auto), and wraps long text inside an equal-height chip (max-width: 100%).Verification
tsc --noEmitpasses.Visual-only CSS change (no DOM text/structure or behaviour changed), so the
e2e/journeys don't require updates.🤖 Generated with Claude Code
https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
The grade boxes rendered inconsistently: Safeguarding "Met" was a small 0.8125rem inline pill while grade values ("Strong") were 1.25rem full-width chips, and because category labels wrap to one or two lines each value sat at a different vertical position. Two-line values like "Expected standard" also produced a taller box. Add a scoped `.gradeGrid` modifier (Report Card + OEIF grids in both the primary and secondary detail views) that reserves two label lines so every chip shares a baseline, and gives all value chips one font size, padding and min-height — long text wraps inside an equal-height chip via max-width:100%. Scoped rather than touching the shared `.metricCard`/`.metricValue` used by the finance, phonics and admissions sections. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB