feat(search): open postcode searches on the map on phones too

Trial the map as the default for every postcode search, not only on
desktop (DEFAULT_LOCATION_VIEW in HomeView; results_view_changed shows
how often readers switch away). The view is now derived: the reader's
choice once made, else the default for the kind of search. That follows
a hero search through client-side navigation without syncing state.

With nothing left varying by device, the user-agent default goes
(lib/device.ts, the headers() read in page.tsx). That settles two review
points: the HTML no longer needs Vary: User-Agent, and there is no
narrow-window fallback left to flash the map before the list.

Review fix in LeafletMapInner: the card reopened only when the selection
or the school list changed, so a rebuild caused by the centre, reference
point or radius closed it for good while the page still had the school
selected. The selection effect now follows a pins-rebuilt counter.
SchoolMap memoises its fallback centre, which was a fresh array on every
render and would have rebuilt every pin each time.

Phones hide the map view's list pane, so it no longer builds up to 500
hidden cards there (decided after mount, so hydration still matches).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

nextjs-app/components/HomeView.tsx

@@ -31,16 +31,14 @@ interface HomeViewProps {
   editorial?: React.ReactNode;
   /** Server-read feature flag, threaded to both FilterBar instances. */
   autosuggest?: boolean;
-  /**
-   * Which view a location search opens in, chosen by the server from the
-   * user agent: the map on desktop, the list on phones and tablets. Deciding
-   * it server-side means a desktop reader never sees the list flash first.
-   */
-  initialView?: 'list' | 'map';
 }
 
-/* Below this the list-beside-map layout has no room; open on the list. */
-const MAP_DEFAULT_MIN_WIDTH = 1024;
+/*
+ * The view a postcode search opens in, on every screen size. The map is on
+ * trial as the default (2026-09-30); results_view_changed shows how often
+ * readers switch away from it. Name searches have no map and always list.
+ */
+const DEFAULT_LOCATION_VIEW: 'list' | 'map' = 'map';
 
 function daysUntil(month: number, day: number): number {
   const today = new Date();
@@ -226,38 +224,18 @@ const VALUE_PROPS: ValueProp[] = [
   },
 ];
 
-export function HomeView({ initialSchools, filters, totalSchools, howItWorks, editorial, autosuggest = false, initialView = 'list' }: HomeViewProps) {
+export function HomeView({ initialSchools, filters, totalSchools, howItWorks, editorial, autosuggest = false }: HomeViewProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
   const pathname = usePathname();
   const { addSchool, removeSchool, selectedSchools } = useComparisonContext();
-  const [resultsView, setResultsView] = useState<'list' | 'map'>(initialView);
-  // Once someone picks a view it is theirs; the default never overrides it.
-  const [viewChosen, setViewChosen] = useState(false);
   /*
-   * Follow the server's default until then. Most searches start in the hero
-   * and reach the results by client-side navigation, which hands this same
-   * component a new initialView rather than mounting a fresh one, so the
-   * initial state alone would leave a desktop reader on the list. Adjusted
-   * during render, not in an effect, so the list never paints first.
+   * The reader's choice, once they make one; until then the default for the
+   * kind of search. Derived rather than seeded into state, because a hero
+   * search reaches the results by client-side navigation: the same instance
+   * gets new props, and a state seeded on the landing page would stay "list".
    */
-  const [defaultFor, setDefaultFor] = useState(initialView);
-  if (defaultFor !== initialView) {
-    setDefaultFor(initialView);
-    if (!viewChosen) {
-      setResultsView(initialView === 'map' && window.innerWidth < MAP_DEFAULT_MIN_WIDTH ? 'list' : initialView);
-    }
-  }
-  // The user agent said desktop, but the window is too narrow for the split
-  // layout (a narrow desktop window, or a test at phone width): fall back to
-  // the list before anyone has chosen.
-  useEffect(() => {
-    if (initialView === 'map' && window.innerWidth < MAP_DEFAULT_MIN_WIDTH) {
-      setResultsView('list');
-    }
-    // Mount only; later defaults are handled during render above.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const [chosenView, setChosenView] = useState<'list' | 'map' | null>(null);
   const [selectedMapSchool, setSelectedMapSchool] = useState<School | null>(null);
   const sortOrder = searchParams.get('sort') || 'default';
   const [allSchools, setAllSchools] = useState<School[]>(initialSchools.schools);
@@ -320,6 +298,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
   const isSecondaryView = currentPhase.toLowerCase().includes('secondary')
     || (!currentPhase && secondaryCount > primaryCount);
   const isMixedView = primaryCount > 0 && secondaryCount > 0 && !currentPhase;
+  const resultsView: 'list' | 'map' = chosenView ?? (isLocationSearch ? DEFAULT_LOCATION_VIEW : 'list');
 
   // The map view fills the screen below the pinned toolbar, whose height
   // depends on how its controls wrap. Measure it rather than guess.
@@ -530,6 +509,22 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
 
   const hasViewSwitch = isLocationSearch && initialSchools.schools.length > 0;
   const compareUrns = useMemo(() => selectedSchools.map(s => s.urn), [selectedSchools]);
+
+  /*
+   * Below 769px the map view hides its list pane (HomeView.module.css), and
+   * with the map now the default on phones, every postcode search there
+   * would otherwise build up to 500 hidden cards. Decided after mount, so
+   * the server's HTML and the first client render still agree.
+   */
+  const [listPaneShown, setListPaneShown] = useState(true);
+  useEffect(() => {
+    if (typeof window.matchMedia !== 'function') return;
+    const query = window.matchMedia('(min-width: 769px)');
+    const update = () => setListPaneShown(query.matches);
+    update();
+    query.addEventListener('change', update);
+    return () => query.removeEventListener('change', update);
+  }, []);
   const clearMapSelection = useCallback(() => setSelectedMapSchool(null), []);
 
   // A pin chosen on the map brings its card into view in the list beside it.
@@ -547,8 +542,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
    */
   const changeView = (view: 'list' | 'map', via: 'toolbar' | 'floating') => {
     if (view === resultsView) return;
-    setResultsView(view);
-    setViewChosen(true);
+    setChosenView(view);
     track('results_view_changed', { view, via });
     requestAnimationFrame(() => {
       const results = resultsRef.current;
@@ -803,7 +797,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
             <div className={styles.mapListPane}>
               {resultsHeader}
               <div ref={mapListRef} className={styles.compactList}>
-                {mapListSchools.map((school) => (
+                {listPaneShown && mapListSchools.map((school) => (
                   <CompactSchoolItem
                     key={school.urn}
                     school={school}

nextjs-app/components/LeafletMapInner.tsx

@@ -5,7 +5,7 @@
 
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import type { School } from '@/lib/types';
@@ -124,6 +124,10 @@ export default function LeafletMapInner({
   const overlayRef = useRef<L.LayerGroup | null>(null);
   const popupRef = useRef<L.Popup | null>(null);
   const selectedRef = useRef<number | null>(null);
+  // Bumped whenever the pins are rebuilt, for any reason, so the selection
+  // effect puts the card back on the new pin rather than only when the
+  // selection or the school list changes.
+  const [pinsVersion, setPinsVersion] = useState(0);
 
   // The popup is plain HTML outside React, so its handlers read the latest
   // props through a ref rather than closing over the render they were made in.
@@ -216,6 +220,7 @@ export default function LeafletMapInner({
     } else {
       map.setView(center, zoom);
     }
+    setPinsVersion(v => v + 1);
   }, [schools, center, zoom, referencePoint, radiusMiles]);
 
   // Selection: restyle the pin, and on wide screens open its card.
@@ -267,7 +272,7 @@ export default function LeafletMapInner({
       if ((e.target as HTMLElement).closest('[data-compare]')) latest.current.onAddToCompare?.(school);
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedUrn, schools]);
+  }, [selectedUrn, pinsVersion]);
 
   // The open card follows the compare basket and the averages as they arrive.
   useEffect(() => {

nextjs-app/components/SchoolMap.tsx

@@ -6,7 +6,7 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import type { School } from '@/lib/types';
 import styles from './SchoolMap.module.css';
 
@@ -85,8 +85,9 @@ export function SchoolMap({ schools, center, zoom = 13, referencePoint, onMarker
     }
   }, [fallbackFullscreen]);
 
-  // Calculate center if not provided
-  const mapCenter: [number, number] = center || (() => {
+  // Calculate center if not provided. Memoised: a fresh array on every render
+  // would make the map refit and rebuild every pin each time.
+  const mapCenter = useMemo<[number, number]>(() => center || (() => {
     if (schools.length === 0) return [51.5074, -0.1278];
     if (schools.length === 1 && schools[0].latitude && schools[0].longitude) {
       return [schools[0].latitude, schools[0].longitude];
@@ -95,8 +96,8 @@ export function SchoolMap({ schools, center, zoom = 13, referencePoint, onMarker
     if (validSchools.length === 0) return [51.5074, -0.1278];
     const avgLat = validSchools.reduce((sum, s) => sum + (s.latitude || 0), 0) / validSchools.length;
     const avgLng = validSchools.reduce((sum, s) => sum + (s.longitude || 0), 0) / validSchools.length;
-    return [avgLat, avgLng];
-  })();
+    return [avgLat, avgLng] as [number, number];
+  })(), [center, schools]);
 
   return (
     <div ref={wrapperRef} className={`${styles.mapWrapper} ${isFullscreen ? styles.fullscreen : ''} ${fallbackFullscreen ? styles.fsFallback : ''}`}>