feat(search): align the map view with the mockup and open it on desktop

The map view now follows option B of the results-controls mockups:

- The list sits in a pane on the left, under the result count and sort,
  and the map fills the rest of the screen below the pinned toolbar. The
  toolbar's height is measured, so the split ends 1rem above the bottom
  of the screen however the controls wrap.
- Pins are brand-teal dots and the selected one is coral. The search
  location is an ink dot, the search radius a dashed circle with its
  distance, and the view fits that circle. Tiles are muted and the zoom
  sits under the fullscreen button.
- A school picked on the map or in the list opens a card on the map
  (View, + Compare, following the basket), and its list card is ringed
  and scrolled into view. Phones keep the bottom sheet.
- The list cards show the full name, Ofsted and school type, the
  headline figure and pupils.

The map cards now follow the list rows: no England benchmark for
special schools, PRUs and AP, and no placeholder all-zero RWM (Greenmead
showed "0% RWM -62 pts vs national"). That rule moves to a shared
listRwmValue helper.

A postcode search opens on the map for desktop browsers, chosen on the
server from the user agent so the list never paints first. The client
falls back to the list below 1024px, and follows the default through
client-side navigation from the hero until the reader picks a view.

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

nextjs-app/components/HomeView.tsx

@@ -5,7 +5,7 @@
 
 'use client';
 
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { FilterBar } from './FilterBar';
 import { SchoolRow } from './SchoolRow';
@@ -16,7 +16,7 @@ import { HeroIllustration } from './Illustration';
 import { useComparisonContext } from '@/context/ComparisonContext';
 import { fetchSchools, fetchLAaverages, fetchNationalAverages } from '@/lib/api';
 import type { SchoolsResponse, Filters, School } from '@/lib/types';
-import { schoolUrl, buildOfstedListBadge } from '@/lib/utils';
+import { schoolUrl, buildOfstedListBadge, isSpecialSchool, listRwmValue } from '@/lib/utils';
 import { track } from '@/lib/analytics';
 import styles from './HomeView.module.css';
 
@@ -31,8 +31,17 @@ 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;
+
 function daysUntil(month: number, day: number): number {
   const today = new Date();
   today.setHours(0, 0, 0, 0);
@@ -217,12 +226,38 @@ const VALUE_PROPS: ValueProp[] = [
   },
 ];
 
-export function HomeView({ initialSchools, filters, totalSchools, howItWorks, editorial, autosuggest = false }: HomeViewProps) {
+export function HomeView({ initialSchools, filters, totalSchools, howItWorks, editorial, autosuggest = false, initialView = 'list' }: HomeViewProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
   const pathname = usePathname();
   const { addSchool, removeSchool, selectedSchools } = useComparisonContext();
-  const [resultsView, setResultsView] = useState<'list' | 'map'>('list');
+  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.
+   */
+  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 [selectedMapSchool, setSelectedMapSchool] = useState<School | null>(null);
   const sortOrder = searchParams.get('sort') || 'default';
   const [allSchools, setAllSchools] = useState<School[]>(initialSchools.schools);
@@ -236,6 +271,8 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
   const prevSearchParamsRef = useRef(searchParams.toString());
   const toolbarRef = useRef<HTMLDivElement>(null);
   const resultsRef = useRef<HTMLElement>(null);
+  const mapListRef = useRef<HTMLDivElement>(null);
+
   const mapParamsRef = useRef<string>('');
   const loadMoreController = useRef<AbortController | null>(null);
   // Identity changes even for A → B → A, so an old A response stays stale.
@@ -284,6 +321,17 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
     || (!currentPhase && secondaryCount > primaryCount);
   const isMixedView = primaryCount > 0 && secondaryCount > 0 && !currentPhase;
 
+  // The map view fills the screen below the pinned toolbar, whose height
+  // depends on how its controls wrap. Measure it rather than guess.
+  const [toolbarHeight, setToolbarHeight] = useState<number | null>(null);
+  useEffect(() => {
+    const el = toolbarRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => setToolbarHeight(Math.round(el.getBoundingClientRect().height)));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [isSearchActive]);
+
   // Reset pagination and map cache when search params change
   useEffect(() => {
     const newParamsStr = searchParams.toString();
@@ -419,7 +467,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
     );
   }, [router]);
 
-  const sortedSchools = [...allSchools].sort((a, b) => {
+  const sortSchools = (list: School[]) => [...list].sort((a, b) => {
     if (sortOrder === 'rwm_desc') return (b.rwm_expected_pct ?? -Infinity) - (a.rwm_expected_pct ?? -Infinity);
     if (sortOrder === 'rwm_asc') return (a.rwm_expected_pct ?? Infinity) - (b.rwm_expected_pct ?? Infinity);
     if (sortOrder === 'att8_desc') return (b.attainment_8_score ?? -Infinity) - (a.attainment_8_score ?? -Infinity);
@@ -428,6 +476,14 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
     if (sortOrder === 'name_asc') return a.school_name.localeCompare(b.school_name);
     return 0;
   });
+  const sortedSchools = sortSchools(allSchools);
+  // The map gets a stable array (a new one rebuilds every pin and closes the
+  // open card); only the list beside it is sorted.
+  const mapResultSchools = mapSchools.length > 0 ? mapSchools : initialSchools.schools;
+  const mapListSchools = sortSchools(mapResultSchools);
+  const radiusMiles = initialSchools.location_info
+    ? Number((initialSchools.location_info.radius / 1.60934).toFixed(1))
+    : undefined;
 
   // Empty-results sentinel: track when a search returns nothing.
   useEffect(() => {
@@ -473,6 +529,15 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
   }, [addSchool, selectedSchools.length]);
 
   const hasViewSwitch = isLocationSearch && initialSchools.schools.length > 0;
+  const compareUrns = useMemo(() => selectedSchools.map(s => s.urn), [selectedSchools]);
+  const clearMapSelection = useCallback(() => setSelectedMapSchool(null), []);
+
+  // A pin chosen on the map brings its card into view in the list beside it.
+  useEffect(() => {
+    if (!selectedMapSchool) return;
+    const card = mapListRef.current?.querySelector<HTMLElement>(`[data-urn="${selectedMapSchool.urn}"]`);
+    if (card?.offsetParent) card.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  }, [selectedMapSchool]);
 
   /*
    * Switching view from far down the list would otherwise leave the reader
@@ -483,6 +548,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);
     track('results_view_changed', { view, via });
     requestAnimationFrame(() => {
       const results = resultsRef.current;
@@ -496,11 +562,52 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
     });
   };
 
+  const isMapView = initialSchools.schools.length > 0 && resultsView === 'map' && isLocationSearch;
+
+  // The count and the sort. Above the list in list view; at the top of the
+  // list pane, beside the map, in map view.
+  const resultsHeader = (
+    <div className={styles.resultsHeader}>
+      <h2 aria-live="polite" aria-atomic="true">
+        {isLocationSearch && initialSchools.location_info
+          ? `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''} within ${(initialSchools.location_info.radius / 1.60934).toFixed(1)} miles of ${initialSchools.location_info.postcode}`
+          : `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''} found`
+        }
+      </h2>
+      <div className={styles.resultsHeaderActions}>
+        <select
+          value={sortOrder}
+          onChange={e => {
+            const params = new URLSearchParams(searchParams);
+            if (e.target.value === 'default') {
+              params.delete('sort');
+            } else {
+              params.set('sort', e.target.value);
+            }
+            router.push(`${pathname}?${params.toString()}`);
+          }}
+          className={styles.sortSelect}
+        >
+          <option value="default">Sort: Relevance</option>
+          {(!isSecondaryView || isMixedView) && <option value="rwm_desc">Highest Reading, Writing &amp; Maths %</option>}
+          {(!isSecondaryView || isMixedView) && <option value="rwm_asc">Lowest Reading, Writing &amp; Maths %</option>}
+          {(isSecondaryView || isMixedView) && <option value="att8_desc">Highest Attainment 8</option>}
+          {(isSecondaryView || isMixedView) && <option value="att8_asc">Lowest Attainment 8</option>}
+          {isLocationSearch && <option value="distance">Nearest first</option>}
+          <option value="name_asc">Name A–Z</option>
+        </select>
+      </div>
+    </div>
+  );
+
   return (
     /* The landing arrangement owns its own vertical rhythm (one gap, set in
        CSS); the search arrangement is a filter bar directly above its results
        and wants none of it. */
-    <div className={isSearchActive ? styles.homeView : `${styles.homeView} ${styles.landing}`}>
+    <div
+      className={isSearchActive ? styles.homeView : `${styles.homeView} ${styles.landing}`}
+      style={toolbarHeight ? { '--toolbar-h': `${toolbarHeight}px` } as React.CSSProperties : undefined}
+    >
       {/* Hero: a Sand panel with the proposition and the search on the left and
           the brand landscape bleeding to the panel edge on the right. The
           search lives inside the panel here and above the results elsewhere,
@@ -669,43 +776,9 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
           </div>
         )}
 
-        {hasSearch && (
-          <div className={styles.resultsHeader}>
-            <h2 aria-live="polite" aria-atomic="true">
-              {isLocationSearch && initialSchools.location_info
-                ? `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''} within ${(initialSchools.location_info.radius / 1.60934).toFixed(1)} miles of ${initialSchools.location_info.postcode}`
-                : `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''} found`
-              }
-            </h2>
-            <div className={styles.resultsHeaderActions}>
-              {resultsView === 'list' && (
-                <select
-                  value={sortOrder}
-                  onChange={e => {
-                    const params = new URLSearchParams(searchParams);
-                    if (e.target.value === 'default') {
-                      params.delete('sort');
-                    } else {
-                      params.set('sort', e.target.value);
-                    }
-                    router.push(`${pathname}?${params.toString()}`);
-                  }}
-                  className={styles.sortSelect}
-                >
-                  <option value="default">Sort: Relevance</option>
-                  {(!isSecondaryView || isMixedView) && <option value="rwm_desc">Highest Reading, Writing &amp; Maths %</option>}
-                  {(!isSecondaryView || isMixedView) && <option value="rwm_asc">Lowest Reading, Writing &amp; Maths %</option>}
-                  {(isSecondaryView || isMixedView) && <option value="att8_desc">Highest Attainment 8</option>}
-                  {(isSecondaryView || isMixedView) && <option value="att8_asc">Lowest Attainment 8</option>}
-                  {isLocationSearch && <option value="distance">Nearest first</option>}
-                  <option value="name_asc">Name A–Z</option>
-                </select>
-              )}
-            </div>
-          </div>
-        )}
+        {hasSearch && !isMapView && resultsHeader}
 
-        {isSearchActive && (
+        {isSearchActive && !isMapView && (
           <div className={styles.activeFilters}>
             {searchParams.get('search') && <span className={styles.filterChip}>Search: {searchParams.get('search')}<a href="/" className={styles.chipRemove} onClick={e => { e.preventDefault(); }}>×</a></span>}
             {searchParams.get('local_authority') && <span className={styles.filterChip}>{searchParams.get('local_authority')}</span>}
@@ -724,35 +797,41 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
               },
             }}
           />
-        ) : initialSchools.schools.length > 0 && resultsView === 'map' && isLocationSearch ? (
-          /* Map View Layout */
+        ) : isMapView ? (
+          /* Map View Layout: the list beside the map, as one card. */
           <div className={styles.mapViewContainer}>
+            <div className={styles.mapListPane}>
+              {resultsHeader}
+              <div ref={mapListRef} className={styles.compactList}>
+                {mapListSchools.map((school) => (
+                  <CompactSchoolItem
+                    key={school.urn}
+                    school={school}
+                    onAddToCompare={addSchoolFromSearch}
+                    isInCompare={compareUrns.includes(school.urn)}
+                    nationalAvgRwm={nationalAvgRwm}
+                    laAverages={laAverages}
+                    isSelected={selectedMapSchool?.urn === school.urn}
+                    onSelect={setSelectedMapSchool}
+                  />
+                ))}
+              </div>
+            </div>
             <div className={styles.mapContainer}>
               <SchoolMap
-                schools={isLoadingMap ? initialSchools.schools : mapSchools}
+                schools={mapResultSchools}
                 center={initialSchools.location_info?.coordinates}
                 referencePoint={initialSchools.location_info?.coordinates}
+                radiusMiles={radiusMiles}
+                selectedUrn={selectedMapSchool?.urn ?? null}
                 onMarkerClick={setSelectedMapSchool}
+                onDeselect={clearMapSelection}
+                onAddToCompare={addSchoolFromSearch}
+                compareUrns={compareUrns}
                 nationalAvgRwm={nationalAvgRwm}
                 laAverages={laAverages}
               />
             </div>
-            <div className={styles.compactList}>
-              {(isLoadingMap ? initialSchools.schools : mapSchools).map((school) => (
-                <div
-                  key={school.urn}
-                  className={`${styles.listItemWrapper} ${selectedMapSchool?.urn === school.urn ? styles.highlightedItem : ''}`}
-                >
-                  <CompactSchoolItem
-                    school={school}
-                    onAddToCompare={addSchoolFromSearch}
-                    isInCompare={selectedSchools.some(s => s.urn === school.urn)}
-                    nationalAvgRwm={nationalAvgRwm}
-                  />
-                </div>
-              ))}
-            </div>
-
           </div>
         ) : (
           /* List View Layout */
@@ -829,8 +908,10 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
               <CompactSchoolItem
                 school={selectedMapSchool}
                 onAddToCompare={addSchoolFromSearch}
-                isInCompare={selectedSchools.some(s => s.urn === selectedMapSchool.urn)}
+                isInCompare={compareUrns.includes(selectedMapSchool.urn)}
                 nationalAvgRwm={nationalAvgRwm}
+                laAverages={laAverages}
+                showView
               />
             </div>
           )}
@@ -840,100 +921,104 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
   );
 }
 
-/* Compact School Item for Map View */
+/* Compact School Item: a card in the map view's list, and the phone's bottom sheet. */
 interface CompactSchoolItemProps {
   school: School;
   onAddToCompare: (school: School) => void;
   isInCompare: boolean;
   nationalAvgRwm?: number | null;
+  laAverages?: Record<string, number>;
+  isSelected?: boolean;
+  /** Clicking the card (not its link or button) picks its pin on the map. */
+  onSelect?: (school: School) => void;
+  /** The bottom sheet has no list around it, so it carries its own View. */
+  showView?: boolean;
 }
 
-function CompactSchoolItem({ school, onAddToCompare, isInCompare, nationalAvgRwm }: CompactSchoolItemProps) {
+function CompactSchoolItem({
+  school, onAddToCompare, isInCompare, nationalAvgRwm, laAverages, isSelected, onSelect, showView,
+}: CompactSchoolItemProps) {
   const ofstedBadge = buildOfstedListBadge(school);
-  const isSecondary = school.attainment_8_score != null;
+  const special = isSpecialSchool(school);
+  const href = schoolUrl(school.urn, school.school_name);
 
-  // vs-national delta for primary schools
-  const rwmDelta =
-    !isSecondary && school.rwm_expected_pct != null && nationalAvgRwm != null
-      ? Math.round(school.rwm_expected_pct - nationalAvgRwm)
-      : null;
+  /*
+   * The headline figure, then its comparison. Same rules as the list rows:
+   * no placeholder all-zero RWM, and no mainstream benchmark for special
+   * schools, PRUs or AP.
+   */
+  let figure: React.ReactNode = null;
+  if (school.attainment_8_score != null) {
+    const laAvg = school.local_authority ? laAverages?.[school.local_authority] : undefined;
+    const diff = !special && laAvg != null
+      ? Math.round((school.attainment_8_score - laAvg) * 10) / 10 : null;
+    figure = (
+      <>
+        <strong>{school.attainment_8_score.toFixed(1)}</strong> Att 8
+        {diff != null && (
+          <span className={diff >= 0.5 ? styles.deltaUp : diff <= -0.5 ? styles.deltaDown : undefined}>
+            {' '}{diff >= 0 ? '+' : ''}{diff} vs LA
+          </span>
+        )}
+      </>
+    );
+  } else {
+    const rwm = listRwmValue(school);
+    if (rwm != null) {
+      const diff = !special && nationalAvgRwm != null ? Math.round(rwm - nationalAvgRwm) : null;
+      figure = (
+        <>
+          <strong>{rwm}%</strong> RWM
+          {diff != null && (
+            <span className={diff >= 2 ? styles.deltaUp : diff <= -2 ? styles.deltaDown : undefined}>
+              {' '}{diff >= 2 ? `+${diff} pts` : diff <= -2 ? `${diff} pts` : '≈ national'}
+            </span>
+          )}
+        </>
+      );
+    }
+  }
 
-  const deltaStyle: React.CSSProperties =
-    rwmDelta == null
-      ? {}
-      : rwmDelta >= 2
-      ? { fontSize: '0.7rem', color: 'var(--status-above)', fontWeight: 600 }
-      : rwmDelta <= -2
-      ? { fontSize: '0.7rem', color: 'var(--brand)', fontWeight: 600 }
-      : { fontSize: '0.7rem', color: 'var(--text-muted)' };
+  const handleClick = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest('a, button')) return;
+    onSelect?.(school);
+  };
 
   return (
-    <div className={styles.compactItem}>
-      <div className={styles.compactItemContent}>
-        <div className={styles.compactItemHeader}>
-          <a href={schoolUrl(school.urn, school.school_name)} className={styles.compactItemName}>
-            {school.school_name}
-          </a>
-          {school.distance !== undefined && school.distance !== null && (
-            <span className={styles.distanceBadge}>
-              {school.distance.toFixed(1)} mi
-            </span>
-          )}
-        </div>
-        {/* Ofsted badge */}
-        <div style={{ marginBottom: '0.25rem' }}>
-          <span
-            style={{
-              display: 'inline-block',
-              padding: '0.0625rem 0.375rem',
-              fontSize: '0.625rem',
-              fontWeight: 600,
-              borderRadius: '3px',
-              whiteSpace: 'nowrap',
-              ...(ofstedBadge.cssClass === 'ofsted1' ? { background: 'var(--status-above-bg)', color: 'var(--status-above)' } :
-                  ofstedBadge.cssClass === 'ofsted2' ? { background: 'var(--status-above-bg)', color: 'var(--status-above)' } :
-                  ofstedBadge.cssClass === 'ofsted3' ? { background: 'var(--status-below-bg)', color: 'var(--status-below)' } :
-                  ofstedBadge.cssClass === 'ofsted4' ? { background: 'var(--status-below)', color: 'var(--text-inverse)' } :
-                  ofstedBadge.cssClass === 'ofstedRc' ? { background: 'var(--phase-secondary-text)', color: 'var(--text-inverse)' } :
-                  ofstedBadge.cssClass === 'ofstedPending' ? { background: 'var(--bg-secondary)', color: 'var(--text-muted)' } :
-                  { background: 'var(--bg-secondary)', color: 'var(--text-muted)' }),
-            }}
-          >
-            {ofstedBadge.label}
-          </span>
-        </div>
-        {/* Headline metric + delta */}
-        <div className={styles.compactItemStats}>
-          <span className={styles.compactStat}>
-            <strong>
-              {isSecondary
-                ? (school.attainment_8_score != null ? school.attainment_8_score.toFixed(1) : '-')
-                : (school.rwm_expected_pct != null ? `${school.rwm_expected_pct}%` : '-')}
-            </strong>
-            {' '}
-            {isSecondary ? 'Att 8' : 'RWM'}
-          </span>
-          {rwmDelta != null && (
-            <span style={deltaStyle}>
-              {rwmDelta >= 2
-                ? `+${rwmDelta} pts vs national`
-                : rwmDelta <= -2
-                ? `${rwmDelta} pts vs national`
-                : '≈ national avg'}
-            </span>
-          )}
-        </div>
+    <div
+      data-urn={school.urn}
+      className={`${styles.compactItem} ${isSelected ? styles.compactItemSelected : ''}`}
+      onClick={onSelect ? handleClick : undefined}
+    >
+      <div className={styles.compactItemHeader}>
+        <a href={href} className={styles.compactItemName}>{school.school_name}</a>
+        {school.distance != null && (
+          <span className={styles.distanceBadge}>{school.distance.toFixed(1)} mi</span>
+        )}
       </div>
-      <div className={styles.compactItemActions}>
-        <button
-          className={isInCompare ? 'btn btn-active btn-sm' : 'btn btn-secondary btn-sm'}
-          onClick={() => onAddToCompare(school)}
-        >
-          {isInCompare ? '✓ Comparing' : '+ Compare'}
-        </button>
-        <a href={schoolUrl(school.urn, school.school_name)} className="btn btn-tertiary btn-sm">
-          View
-        </a>
+      <div className={styles.compactItemTags}>
+        <span className={`${styles.compactBadge} ${styles[ofstedBadge.cssClass] ?? ''}`}>
+          {ofstedBadge.label}
+        </span>
+        {school.school_type && <span className={styles.compactTag}>{school.school_type}</span>}
+      </div>
+      <div className={styles.compactItemFooter}>
+        <span className={styles.compactStat}>
+          {figure}
+          {school.total_pupils != null && (
+            <>{figure ? ' · ' : ''}{school.total_pupils.toLocaleString('en-GB')} pupils</>
+          )}
+        </span>
+        <div className={styles.compactItemActions}>
+          {showView && <a href={href} className="btn btn-tertiary btn-sm">View</a>}
+          <button
+            type="button"
+            className={isInCompare ? 'btn btn-active btn-sm' : 'btn btn-secondary btn-sm'}
+            onClick={() => onAddToCompare(school)}
+          >
+            {isInCompare ? '✓ Comparing' : '+ Compare'}
+          </button>
+        </div>
       </div>
     </div>
   );