From 192173e51534726af632c3625b43fa42ca7c3366 Mon Sep 17 00:00:00 2001
From: Tudor <tudor@Tudors-MacBook-Pro.local>
Date: Thu, 2 Jul 2026 16:17:12 +0100
Subject: [PATCH] feat(school-detail): icon-only Compare on phone heroes;
 unclutter map bottom edge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On ≤640px the floating Compare button becomes a 40px round glyph (+ / ✓,
aria-labelled) like the section-nav compare icon, instead of a full-width
text pill over the map. The OSM attribution moves to the map band's
top-left in preview so it no longer collides with the school name sliding
up under the fade; fullscreen keeps Leaflet's default bottom-right since
the zoom control occupies the top-left there.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/SchoolDetailView.module.css    | 30 +++++++++++++++++++
 nextjs-app/components/SchoolDetailView.tsx    |  9 +++++-
 .../components/SchoolHeroMap.module.css       | 11 +++++++
 .../SecondarySchoolDetailView.module.css      | 30 +++++++++++++++++++
 .../components/SecondarySchoolDetailView.tsx  |  9 +++++-
 5 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index 375ad3c..173ad28 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/nextjs-app/components/SchoolDetailView.module.css
@@ -87,6 +87,36 @@
     background: #fff;
 }
 
+/* Full label by default; phones over the map get an icon-only button
+   (same compact treatment as the section-nav compare icon). */
+.btnCompareGlyph {
+    display: none;
+}
+
+@media (max-width: 640px) {
+    .headerHasMap .actions .btnCompareLabel {
+        display: none;
+    }
+
+    .headerHasMap .actions .btnCompareGlyph {
+        display: inline;
+    }
+
+    .headerHasMap .actions .btnAdd,
+    .headerHasMap .actions .btnRemove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+        width: 40px;
+        height: 40px;
+        padding: 0;
+        border-radius: 999px;
+        font-size: 1.375rem;
+        line-height: 1;
+    }
+}
+
 /* Inline "View on map ↗" trigger next to the address. */
 .mapLink {
     border: none;
diff --git a/nextjs-app/components/SchoolDetailView.tsx b/nextjs-app/components/SchoolDetailView.tsx
index 4fb42ec..b15dc4a 100644
--- a/nextjs-app/components/SchoolDetailView.tsx
+++ b/nextjs-app/components/SchoolDetailView.tsx
@@ -373,8 +373,15 @@ export function SchoolDetailView({
             <button
               onClick={handleComparisonToggle}
               className={isInComparison ? styles.btnRemove : styles.btnAdd}
+              aria-label={isInComparison ? 'In comparison' : 'Add to compare'}
             >
-              {isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
+              {/* On phones the map hero shows only the glyph (nav-bar style). */}
+              <span className={styles.btnCompareLabel}>
+                {isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
+              </span>
+              <span className={styles.btnCompareGlyph} aria-hidden="true">
+                {isInComparison ? '✓' : '+'}
+              </span>
             </button>
           </div>
         </div>
diff --git a/nextjs-app/components/SchoolHeroMap.module.css b/nextjs-app/components/SchoolHeroMap.module.css
index 4d06206..1dbb553 100644
--- a/nextjs-app/components/SchoolHeroMap.module.css
+++ b/nextjs-app/components/SchoolHeroMap.module.css
@@ -16,6 +16,17 @@
     }
 }
 
+/* Preview: move the OSM attribution off the bottom edge, where the school
+   title slides up under the fade — top-left is the band's only quiet corner
+   (Compare floats top-right). Fullscreen keeps Leaflet's default bottom-right,
+   since the zoom control occupies the top-left there. */
+.wrapper:not([data-fullscreen]) :global(.leaflet-bottom.leaflet-right) {
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+}
+
 /* Fullscreen: the Fullscreen API promotes this element to fill the viewport. */
 .wrapper[data-fullscreen] {
     height: 100vh;
diff --git a/nextjs-app/components/SecondarySchoolDetailView.module.css b/nextjs-app/components/SecondarySchoolDetailView.module.css
index c188fda..75daa41 100644
--- a/nextjs-app/components/SecondarySchoolDetailView.module.css
+++ b/nextjs-app/components/SecondarySchoolDetailView.module.css
@@ -87,6 +87,36 @@
     background: #fff;
 }
 
+/* Full label by default; phones over the map get an icon-only button
+   (same compact treatment as the section-nav compare icon). */
+.btnCompareGlyph {
+    display: none;
+}
+
+@media (max-width: 640px) {
+    .headerHasMap .actions .btnCompareLabel {
+        display: none;
+    }
+
+    .headerHasMap .actions .btnCompareGlyph {
+        display: inline;
+    }
+
+    .headerHasMap .actions .btnAdd,
+    .headerHasMap .actions .btnRemove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+        width: 40px;
+        height: 40px;
+        padding: 0;
+        border-radius: 999px;
+        font-size: 1.375rem;
+        line-height: 1;
+    }
+}
+
 /* Inline "View on map ↗" trigger next to the address. */
 .mapLink {
     border: none;
diff --git a/nextjs-app/components/SecondarySchoolDetailView.tsx b/nextjs-app/components/SecondarySchoolDetailView.tsx
index 0f9d87f..7180594 100644
--- a/nextjs-app/components/SecondarySchoolDetailView.tsx
+++ b/nextjs-app/components/SecondarySchoolDetailView.tsx
@@ -292,8 +292,15 @@ export function SecondarySchoolDetailView({
             <button
               onClick={handleComparisonToggle}
               className={isInComparison ? styles.btnRemove : styles.btnAdd}
+              aria-label={isInComparison ? 'In comparison' : 'Add to compare'}
             >
-              {isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
+              {/* On phones the map hero shows only the glyph (nav-bar style). */}
+              <span className={styles.btnCompareLabel}>
+                {isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
+              </span>
+              <span className={styles.btnCompareGlyph} aria-hidden="true">
+                {isInComparison ? '✓' : '+'}
+              </span>
             </button>
           </div>
         </div>