From 3e7705756776a0c44d27966dfc972023f1f38b69 Mon Sep 17 00:00:00 2001
From: Tudor <tudor@Tudors-MacBook-Pro.local>
Date: Sat, 18 Jul 2026 15:19:41 +0100
Subject: [PATCH] style(compare): shorten Ofsted link text to 'Ofsted page'
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 nextjs-app/components/compare/CompareOfsted.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/nextjs-app/components/compare/CompareOfsted.tsx b/nextjs-app/components/compare/CompareOfsted.tsx
index 8af6aad..9875a6b 100644
--- a/nextjs-app/components/compare/CompareOfsted.tsx
+++ b/nextjs-app/components/compare/CompareOfsted.tsx
@@ -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>
           );