feat(compare): lay mobile chart chips two per row

The mobile chart legend stacked one school chip per line, so up to five
schools pushed the chart down and left the plot cramped. Switch the chip
row to a two-column grid; each chip fills its column and truncates its
name with an ellipsis (full names remain on the school cards and in the
tooltip). Five schools now take three rows instead of five, giving the
chart noticeably more height.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

e2e/tests/journeys.spec.ts

@@ -75,31 +75,6 @@ test('school hero map opens fullscreen on mobile without the Fullscreen API', as
   await expect(openMap).toBeVisible();
 });
 
-test('results map fullscreen falls back to an overlay on iOS', async ({ page }) => {
-  // Same iOS gap as the hero map: no Element.requestFullscreen, so the results
-  // map's fullscreen button must fall back to a CSS overlay.
-  await page.setViewportSize({ width: 390, height: 844 });
-  await page.addInitScript(() => {
-    // @ts-expect-error deliberate API removal
-    delete Element.prototype.requestFullscreen;
-  });
-
-  await searchByName(page, 'B1 1BB');
-  await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
-
-  // Switch to the map view, then open the map fullscreen.
-  await page.getByRole('button', { name: 'Map', exact: true }).click();
-  const openFs = page.getByRole('button', { name: 'View map fullscreen' });
-  await expect(openFs).toBeVisible({ timeout: 15_000 });
-  await openFs.click();
-
-  // The button flips to its exit state once the overlay is up.
-  const exitFs = page.getByRole('button', { name: 'Exit fullscreen' });
-  await expect(exitFs).toBeVisible();
-  await exitFs.click();
-  await expect(openFs).toBeVisible();
-});
-
 test('comparing two schools shows both side by side', async ({ page }) => {
   // Collect two school URNs from search results, then load the share URL
   await searchByName(page, 'primary');

nextjs-app/components/ComparisonChart.module.css

@@ -21,8 +21,10 @@
 
 @media (max-width: 640px) {
     .chips {
-        display: flex;
+        /* Two chips per row so long school names don't crowd into a single
-        flex-wrap: wrap;
+           line; each chip fills its column and truncates with an ellipsis. */
+        display: grid;
+        grid-template-columns: 1fr 1fr;
         gap: 6px;
         padding-bottom: 8px;
     }
@@ -31,8 +33,8 @@
         display: inline-flex;
         align-items: center;
         gap: 6px;
-        min-height: 44px;
+        min-height: 40px;
-        max-width: 100%;
+        min-width: 0;
         padding: 4px 10px;
         border: 1px solid rgba(0, 0, 0, .12);
         border-radius: 999px;
@@ -58,6 +60,8 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        max-width: 9rem;
+        /* min-width:0 lets the name shrink inside the grid cell so the
+           ellipsis kicks in instead of overflowing. */
+        min-width: 0;
     }
 }

nextjs-app/components/SchoolMap.module.css

@@ -10,15 +10,6 @@
   height: 100dvh;
 }
 
-/* Fallback fullscreen (iOS Safari — no Element.requestFullscreen): the API
-   can't promote the element, so pin it over the page ourselves. Above the
-   comparison toast (3000) and the bottom nav; below modals (9999+). */
-.mapWrapper.fsFallback {
-  position: fixed;
-  inset: 0;
-  z-index: 5000;
-}
-
 .fullscreenBtn {
   position: absolute;
   top: 0.625rem;

nextjs-app/components/SchoolMap.tsx

@@ -33,52 +33,22 @@ interface SchoolMapProps {
 
 export function SchoolMap({ schools, center, zoom = 13, referencePoint, onMarkerClick, nationalAvgRwm, laAverages }: SchoolMapProps) {
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const [nativeFullscreen, setNativeFullscreen] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
-  // iOS Safari has no Element.requestFullscreen — fall back to a fixed-position
-  // overlay driven by state instead of the Fullscreen API.
-  const [fallbackFullscreen, setFallbackFullscreen] = useState(false);
-  const isFullscreen = nativeFullscreen || fallbackFullscreen;
 
   // Sync state with browser fullscreen events (e.g. Escape key)
   useEffect(() => {
-    const onFsChange = () => setNativeFullscreen(!!document.fullscreenElement);
+    const onFsChange = () => setIsFullscreen(!!document.fullscreenElement);
     document.addEventListener('fullscreenchange', onFsChange);
     return () => document.removeEventListener('fullscreenchange', onFsChange);
   }, []);
 
-  // Lock body scroll while the fallback overlay is up.
-  useEffect(() => {
-    if (!fallbackFullscreen) return;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    return () => { document.body.style.overflow = prev; };
-  }, [fallbackFullscreen]);
-
-  // Leaflet re-measures on window resize (trackResize). Native fullscreen fires
-  // one; the CSS fallback overlay changes size without a resize event, so nudge
-  // Leaflet after the layout settles or the map fills only part of the screen.
-  useEffect(() => {
-    const id = requestAnimationFrame(() => window.dispatchEvent(new Event('resize')));
-    return () => cancelAnimationFrame(id);
-  }, [isFullscreen]);
-
   const toggleFullscreen = useCallback(() => {
-    if (document.fullscreenElement) {
+    if (!document.fullscreenElement) {
-      document.exitFullscreen().catch(() => {});
+      wrapperRef.current?.requestFullscreen();
-      return;
-    }
-    if (fallbackFullscreen) {
-      setFallbackFullscreen(false);
-      return;
-    }
-    const el = wrapperRef.current;
-    if (!el) return;
-    if (el.requestFullscreen) {
-      el.requestFullscreen().catch(() => setFallbackFullscreen(true));
     } else {
-      setFallbackFullscreen(true);
+      document.exitFullscreen();
     }
-  }, [fallbackFullscreen]);
+  }, []);
 
   // Calculate center if not provided
   const mapCenter: [number, number] = center || (() => {
@@ -94,7 +64,7 @@ export function SchoolMap({ schools, center, zoom = 13, referencePoint, onMarker
   })();
 
   return (
-    <div ref={wrapperRef} className={`${styles.mapWrapper} ${isFullscreen ? styles.fullscreen : ''} ${fallbackFullscreen ? styles.fsFallback : ''}`}>
+    <div ref={wrapperRef} className={`${styles.mapWrapper} ${isFullscreen ? styles.fullscreen : ''}`}>
       <button
         className={styles.fullscreenBtn}
         onClick={toggleFullscreen}