Merge pull request 'fix(map): results map fullscreen falls back to an overlay on iOS' (#18) from fix/results-map-ios-fullscreen into main

Reviewed-on: #18

nextjs-app/components/SchoolMap.module.css

@@ -10,6 +10,15 @@
   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,22 +33,52 @@ interface SchoolMapProps {
 
 export function SchoolMap({ schools, center, zoom = 13, referencePoint, onMarkerClick, nationalAvgRwm, laAverages }: SchoolMapProps) {
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [nativeFullscreen, setNativeFullscreen] = 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 = () => setIsFullscreen(!!document.fullscreenElement);
+    const onFsChange = () => setNativeFullscreen(!!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) {
-      wrapperRef.current?.requestFullscreen();
-    } else {
-      document.exitFullscreen();
+    if (document.fullscreenElement) {
+      document.exitFullscreen().catch(() => {});
+      return;
     }
-  }, []);
+    if (fallbackFullscreen) {
+      setFallbackFullscreen(false);
+      return;
+    }
+    const el = wrapperRef.current;
+    if (!el) return;
+    if (el.requestFullscreen) {
+      el.requestFullscreen().catch(() => setFallbackFullscreen(true));
+    } else {
+      setFallbackFullscreen(true);
+    }
+  }, [fallbackFullscreen]);
 
   // Calculate center if not provided
   const mapCenter: [number, number] = center || (() => {
@@ -64,7 +94,7 @@ export function SchoolMap({ schools, center, zoom = 13, referencePoint, onMarker
   })();
 
   return (
-    <div ref={wrapperRef} className={`${styles.mapWrapper} ${isFullscreen ? styles.fullscreen : ''}`}>
+    <div ref={wrapperRef} className={`${styles.mapWrapper} ${isFullscreen ? styles.fullscreen : ''} ${fallbackFullscreen ? styles.fsFallback : ''}`}>
       <button
         className={styles.fullscreenBtn}
         onClick={toggleFullscreen}