style(compare): shorten Ofsted link text to 'Ofsted page'

The link repeated the full school name ('Watford Grammar School for Boys's Ofsted page') — long on mobile, and the colour-coded school name already leads the row. Show just 'Ofsted page →'; keep the full name in aria-label so screen readers can still tell the per-school links apart. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
Merge pull request 'style(compare): enlarge per-school name label in mobile section cards' (#59 ) from fix/mobile-cell-name-size into main
2026-07-18 15:19:41 +01:00 · 2026-07-18 14:09:02 +00:00 · 2026-07-18 15:06:18 +01:00 · 2026-07-18 07:29:51 +00:00
2 changed files with 18 additions and 6 deletions
@@ -239,8 +239,17 @@ export function CompareOfsted({
            `https://reports.ofsted.gov.uk/provider/21/${school.urn}`;
          return (
            <Cell key={school.urn} school={school} index={i}>
-              <a className={s.link} href={url} target="_blank" rel="noopener noreferrer">
-                {school.school_name}&apos;s Ofsted page →
+              {/* Short visible label to save space on mobile (the coloured
+                  school name already leads the row); the full name stays in
+                  aria-label so screen readers can tell the links apart. */}
+              <a
+                className={s.link}
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={`${school.school_name}'s Ofsted page`}
+              >
+                Ofsted page →
              </a>
            </Cell>
          );
@@ -72,15 +72,18 @@
  align-items: center;
  gap: 0.4rem;
  flex-basis: 100%;
-  font-size: 0.8rem;
+  /* Slightly larger than the values below it so the school each row belongs
+     to is easy to read on mobile (hidden on desktop, where the column header
+     names the school). */
+  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sc, var(--text-secondary));
-  margin-bottom: 0.15rem;
+  margin-bottom: 0.2rem;
 }

 .cellDot {
-  width: 9px;
-  height: 9px;
+  width: 10px;
+  height: 10px;
  border-radius: 50%;
  background: var(--dot, var(--text-muted));
  flex: none;
Author	SHA1	Message	Date
TudorandClaude Fable 5	3e77057567	style(compare): shorten Ofsted link text to 'Ofsted page' PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m5s Details PR Checks / Backend Smoke (pull_request) Successful in 7s Details PR Checks / Build Backend (no push) (pull_request) Successful in 10s Details PR Checks / Build Frontend (no push) (pull_request) Successful in 45s Details PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s Details PR Checks / AI Code Review (Claude) (pull_request) Successful in 9s Details The link repeated the full school name ('Watford Grammar School for Boys's Ofsted page') — long on mobile, and the colour-coded school name already leads the row. Show just 'Ofsted page →'; keep the full name in aria-label so screen readers can still tell the per-school links apart. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB	2026-07-18 15:19:41 +01:00
tudor	e0d5a9969e	Merge pull request 'style(compare): enlarge per-school name label in mobile section cards' (#59 ) from fix/mobile-cell-name-size into main Stage (build -> staging -> E2E gate) / Build Backend (FastAPI) (push) Successful in 14s Details Stage (build -> staging -> E2E gate) / Build Frontend (Next.js) (push) Successful in 49s Details Stage (build -> staging -> E2E gate) / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 14s Details Stage (build -> staging -> E2E gate) / Deploy to Staging (push) Successful in 1s Details Stage (build -> staging -> E2E gate) / E2E Journeys against Staging (push) Successful in 41s Details Reviewed-on: #59	2026-07-18 14:09:02 +00:00
TudorandClaude Fable 5	dc21e80a5e	style(compare): enlarge the per-school name label in mobile section cards PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m4s Details PR Checks / Backend Smoke (pull_request) Successful in 7s Details PR Checks / Build Backend (no push) (pull_request) Successful in 11s Details PR Checks / Build Frontend (no push) (pull_request) Successful in 47s Details PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s Details PR Checks / AI Code Review (Claude) (pull_request) Successful in 14s Details The colour-coded school name that leads each row in a mobile measure card was 0.8rem — a touch small to scan which school a value belongs to. Bump to 0.9rem (with a matching 10px dot) so it's easier to read. Mobile only; desktop uses the column header and hides this label. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB	2026-07-18 15:06:18 +01:00
tudor	6d3a203699	Merge pull request 'fix(compare): anchor grade-5 & EBacc rows; restore secondary-button outline' (#58 ) from fix/secondary-anchors-button-affordance into main Stage (build -> staging -> E2E gate) / Build Backend (FastAPI) (push) Successful in 14s Details Stage (build -> staging -> E2E gate) / Build Frontend (Next.js) (push) Successful in 53s Details Stage (build -> staging -> E2E gate) / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 13s Details Stage (build -> staging -> E2E gate) / Deploy to Staging (push) Successful in 0s Details Stage (build -> staging -> E2E gate) / E2E Journeys against Staging (push) Successful in 40s Details Reviewed-on: #58	2026-07-18 07:29:51 +00:00