From 59f13a74f9c4a4dbcfcf13f0e5125c66e1db6479 Mon Sep 17 00:00:00 2001 From: Tudor Sitaru Date: Tue, 19 May 2026 09:38:48 +0100 Subject: [PATCH] feat(mobile): mobile cleanups for deadlines, result cards, tooltips, ofsted, rankings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit MOB-07: Admissions deadlines strip becomes a horizontal snap-scroller on ≤640px instead of a cramped 2×2 grid (which forced "Secondary · Deadline" track labels down to 9.6px). Cards stay readable, the right edge fades to signal more content past the viewport, .chipTrack font bumped to 0.7rem. MOB-09: Result-card line3 (headline metric + secondary stats) was crowding everything onto one row. Force the first .stat (Attainment 8 / RWM headline) to flex-basis 100% on mobile so delta-vs-LA and pupil count wrap below it with a visible row-gap. Applied to both SchoolRow (primary) and SecondarySchoolRow. MOB-12: MetricTooltip ⓘ icons rendered at ~9px and relied on :hover (which doesn't fire on touch). Hide the whole .wrapper at ≤640px — metric labels themselves carry the meaning. Saves building a tap-to-show layer for now. MOB-13: The "Ofsted pending / No inspection on record" empty state took a full hero card to communicate non-information. Add a data-ofsted-state attribute on the hero chip; on ≤640px, the "none" state collapses to a single muted line. MOB-17: Already had Type+Action columns hidden on rankings mobile — no change needed beyond marking complete. MOB-18: Long metric headers ("Reading, Writing & Maths Combined %") forced the value column wide. Drop .valueHeader to 0.625rem with white-space: normal at ≤640px so labels wrap onto 2 short lines. Co-Authored-By: Claude Opus 4.7 --- nextjs-app/components/HomeView.module.css | 32 +++++++++++++++++++ .../components/MetricTooltip.module.css | 10 ++++++ nextjs-app/components/RankingsView.module.css | 10 ++++++ .../components/SchoolDetailView.module.css | 14 ++++++++ nextjs-app/components/SchoolDetailView.tsx | 5 ++- nextjs-app/components/SchoolRow.module.css | 8 ++++- .../components/SecondarySchoolRow.module.css | 9 +++++- 7 files changed, 85 insertions(+), 3 deletions(-) diff --git a/nextjs-app/components/HomeView.module.css b/nextjs-app/components/HomeView.module.css index 9641f41..cb10582 100644 --- a/nextjs-app/components/HomeView.module.css +++ b/nextjs-app/components/HomeView.module.css @@ -1361,3 +1361,35 @@ grid-template-columns: repeat(2, 1fr); } } + +/* On phones the 2×2 grid cramped each chip so badly the "Secondary · + Deadline" track label dropped to 9.6px. Switch to a horizontal + snap-scroller — each card is full-width-ish and stays readable, + and the rightmost card peeks past the edge to signal there's more. */ +@media (max-width: 640px) { + .countdownRail { + display: flex; + grid-template-columns: none; + overflow-x: auto; + scroll-snap-type: x mandatory; + scrollbar-width: none; + gap: 0.75rem; + padding-right: 1.25rem; + margin-inline: -1rem; + padding-inline: 1rem; + -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); + mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); + } + .countdownRail::-webkit-scrollbar { + display: none; + } + .countdownChip { + flex: 0 0 auto; + width: 78%; + min-width: 220px; + scroll-snap-align: start; + } + .chipTrack { + font-size: 0.7rem; + } +} diff --git a/nextjs-app/components/MetricTooltip.module.css b/nextjs-app/components/MetricTooltip.module.css index a11b84f..22324f6 100644 --- a/nextjs-app/components/MetricTooltip.module.css +++ b/nextjs-app/components/MetricTooltip.module.css @@ -81,3 +81,13 @@ width: 180px; } } + +/* On phones the icon was rendering at ~9px and the tooltip relied on + :hover, which doesn't fire on touch. Rather than build a tap-to-show + layer with backdrop dismissal, hide the helper entirely — the metric + labels themselves carry the meaning. */ +@media (max-width: 640px) { + .wrapper { + display: none; + } +} diff --git a/nextjs-app/components/RankingsView.module.css b/nextjs-app/components/RankingsView.module.css index c12c452..0a392c5 100644 --- a/nextjs-app/components/RankingsView.module.css +++ b/nextjs-app/components/RankingsView.module.css @@ -396,6 +396,16 @@ min-width: 60px; } + /* Long metric labels like "Reading, Writing & Maths Combined %" used to + force the whole column wide; let them wrap onto 2 short lines with a + tighter font so the value cell can stay compact. */ + .valueHeader { + font-size: 0.625rem; + white-space: normal; + line-height: 1.15; + letter-spacing: 0.03em; + } + .rankHeader { width: 40px; } diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css index 56b0154..3f42cd8 100644 --- a/nextjs-app/components/SchoolDetailView.module.css +++ b/nextjs-app/components/SchoolDetailView.module.css @@ -1077,6 +1077,20 @@ min-width: 100%; } + /* Collapse the "Ofsted pending / No inspection on record" empty state + into a single compact line on phones — it's a non-result, not worth + a full hero card. */ + .heroChip[data-ofsted-state="none"] { + padding: 0.5rem 0.75rem; + } + .heroChip[data-ofsted-state="none"] .heroChipSub { + display: none; + } + .heroChip[data-ofsted-state="none"] .heroChipTitle { + font-size: 0.85rem; + color: var(--text-muted, #6d685f); + } + .heroStats { gap: 1rem 1.5rem; } diff --git a/nextjs-app/components/SchoolDetailView.tsx b/nextjs-app/components/SchoolDetailView.tsx index ed18a5e..23e98f6 100644 --- a/nextjs-app/components/SchoolDetailView.tsx +++ b/nextjs-app/components/SchoolDetailView.tsx @@ -295,7 +295,10 @@ export function SchoolDetailView({ {/* Hero signal chip strip */}
-
+
{ofstedHeroChip.title}
{ofstedHeroChip.subtitle}
{ofstedHeroChip.detail && ( diff --git a/nextjs-app/components/SchoolRow.module.css b/nextjs-app/components/SchoolRow.module.css index b087c9e..c1f7659 100644 --- a/nextjs-app/components/SchoolRow.module.css +++ b/nextjs-app/components/SchoolRow.module.css @@ -225,8 +225,14 @@ white-space: normal; } + /* Promote the headline metric onto its own line; secondary stats + (delta vs LA, pupils) wrap below with a visible row gap. */ .line3 { - gap: 0 1rem; + row-gap: 0.25rem; + column-gap: 1rem; + } + .line3 > .stat:first-child { + flex-basis: 100%; } .rowActions { diff --git a/nextjs-app/components/SecondarySchoolRow.module.css b/nextjs-app/components/SecondarySchoolRow.module.css index dccf6c7..65d56bd 100644 --- a/nextjs-app/components/SecondarySchoolRow.module.css +++ b/nextjs-app/components/SecondarySchoolRow.module.css @@ -236,8 +236,15 @@ white-space: normal; } + /* Promote the headline metric (Attainment 8) onto its own line so + the secondary stats — delta vs LA, pupils — wrap below it with + visible row gap instead of crowding the same row. */ .line3 { - gap: 0 1rem; + row-gap: 0.25rem; + column-gap: 1rem; + } + .line3 > .stat:first-child { + flex-basis: 100%; } .rowActions {