fix(map): draw the map card's View button like the list's

leaflet.css colours every link in the map `.leaflet-container a`
(#0078A8, specificity 0,1,1), which beat .btn-tertiary (0,1,0), so the
card's View button came out in Leaflet's link blue in both themes. Pull
it back onto --text-secondary next to the other Leaflet overrides.

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

backend/app.py

@@ -736,7 +736,7 @@ async def get_schools(
         None, description="Filter by local authority", max_length=100
     ),
     school_type: Optional[str] = Query(None, description="Filter by school type", max_length=100),
-    phase: Optional[str] = Query(None, description="Filter by phase: primary, secondary, all-through", max_length=50),
+    phase: Optional[str] = Query(None, description="Filter by phase: primary or secondary (grouped), or any GIAS phase name (exact)", max_length=50),
     postcode: Optional[str] = Query(None, description="Search near postcode", max_length=10),
     radius: float = Query(5.0, ge=0.1, le=5, description="Search radius in miles"),
     page: int = Query(1, ge=1, le=1000, description="Page number"),
@@ -771,11 +771,13 @@ async def get_schools(
 
     # Phase filter — uses PHASE_GROUPS so all-through/middle schools appear
     # in the correct phase(s) rather than being invisible to both filters.
+    # Any other GIAS phase (nursery, 16 plus, middle deemed ...) is an exact
+    # match. It must never fall through to no filter: the search page offers
+    # every phase, and "Nursery" used to return the whole result set.
     if phase:
         phase_lower = phase.lower().replace("_", "-")
-        allowed = PHASE_GROUPS.get(phase_lower)
+        allowed = PHASE_GROUPS.get(phase_lower, {phase_lower})
-        if allowed:
+        df_latest = df_latest[df_latest["phase"].fillna("").str.lower().isin(allowed)]
-            df_latest = df_latest[df_latest["phase"].str.lower().isin(allowed)]
 
     # Secondary-specific filters (after phase filter)
     if gender:

backend/tests/test_phase_filter.py

@@ -0,0 +1,84 @@
+"""The /api/schools phase filter.
+
+The search page offers every GIAS phase, but the filter only knew the three
+grouped ones (primary, secondary, all-through). Anything else — nursery,
+16 plus, the middle-deemed phases — fell through to no filter at all, so
+"Nursery" returned the whole result set, mostly primaries.
+"""
+
+import numpy as np
+import pandas as pd
+import pytest
+from fastapi.testclient import TestClient
+
+PHASES = {
+    100001: "Nursery",
+    100002: "Primary",
+    100003: "Middle deemed primary",
+    100004: "Secondary",
+    100005: "Middle deemed secondary",
+    100006: "16 plus",
+    100007: "All-through",
+}
+
+
+def _schools_df() -> pd.DataFrame:
+    base = {
+        "local_authority": "Testshire",
+        "school_type": "Academy",
+        "address": "1 Test Street",
+        "town": "Testtown",
+        "postcode": "TS1 1AA",
+        "religious_denomination": None,
+        "age_range": "4-11",
+        "has_sixth_form": None,
+        "gender": "Mixed",
+        "admissions_policy": None,
+        "ofsted_grade": np.nan,
+        "ofsted_date": None,
+        "ofsted_framework": None,
+        "latitude": 51.5,
+        "longitude": -0.1,
+        "year": 202425,
+        "total_pupils": 300,
+        "rwm_expected_pct": np.nan,
+        "attainment_8_score": np.nan,
+    }
+    return pd.DataFrame([
+        {**base, "urn": urn, "school_name": f"{phase} School", "phase": phase}
+        for urn, phase in PHASES.items()
+    ])
+
+
+@pytest.fixture()
+def client(monkeypatch):
+    from backend import app as app_module
+
+    monkeypatch.setattr(app_module, "load_latest_school_data", _schools_df)
+    monkeypatch.setattr(app_module, "load_school_data", _schools_df)
+    return TestClient(app_module.app, raise_server_exceptions=False)
+
+
+def _urns(client, phase):
+    resp = client.get("/api/schools", params={"phase": phase})
+    assert resp.status_code == 200, resp.text
+    return sorted(s["urn"] for s in resp.json()["schools"])
+
+
+@pytest.mark.parametrize("phase, urn", [
+    ("nursery", 100001),
+    ("16 plus", 100006),
+    ("middle deemed primary", 100003),
+    ("middle deemed secondary", 100005),
+])
+def test_an_ungrouped_phase_matches_exactly(client, phase, urn):
+    assert _urns(client, phase) == [urn]
+
+
+def test_grouped_phases_still_take_in_their_related_phases(client):
+    assert _urns(client, "primary") == [100002, 100003, 100007]
+    assert _urns(client, "secondary") == [100004, 100005, 100006, 100007]
+
+
+def test_an_unknown_phase_returns_nothing_rather_than_everything(client):
+    assert _urns(client, "kindergarten") == []

e2e/tests/journeys.spec.ts

@@ -270,6 +270,34 @@ test('searching by name returns school results', async ({ page }) => {
 test('searching by postcode returns nearby schools', async ({ page }) => {
   await searchByName(page, 'B1 1BB');
   await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
+  // A new postcode search starts at half a mile.
+  await expect(page).toHaveURL(/[?&]radius=0\.5(&|$)/);
+  await expect(page.getByRole('combobox', { name: 'Distance' })).toHaveValue('0.5');
+});
+
+test('the phase filter switches straight from secondary to primary', async ({ page }) => {
+  // The phase options once came from the result set, which the phase filter
+  // had already narrowed — so with secondary chosen, primary was not offered.
+  await page.goto('/?search=school&phase=secondary');
+  const phase = page.getByRole('combobox', { name: 'Phase' });
+  await expect(phase).toHaveValue('secondary', { timeout: 15_000 });
+  await phase.selectOption('primary');
+  await expect(page).toHaveURL(/[?&]phase=primary(&|$)/);
+  await expect(phase).toHaveValue('primary');
+});
+
+test('a phase outside primary/secondary filters to that phase, not to everything', async ({ page }) => {
+  // The search page offers every GIAS phase, but the API only knew the grouped
+  // ones and silently dropped the rest — so "Nursery" returned primaries.
+  for (const phase of ['Nursery', '16 plus']) {
+    const res = await page.request.get(
+      `/api/schools?phase=${encodeURIComponent(phase.toLowerCase())}&page_size=50`);
+    expect(res.ok()).toBeTruthy();
+    const phases = new Set(
+      ((await res.json()).schools ?? []).map((s: { phase?: string }) => s.phase));
+    expect([...phases], `phase=${phase} returned other phases`)
+      .toEqual(phases.size ? [phase] : []);
+  }
 });
 
 test('a report-card school shows a Report Card badge in search results, not its old grade', async ({ page }) => {
@@ -547,6 +575,38 @@ test('the results toolbar stays pinned with its List/Map switch', async ({ page
     .toHaveAttribute('aria-pressed', 'true');
 });
 
+/*
+ * The toolbar's line count is set by the screen width, never by the results.
+ * It once wrapped wherever it ran out of room, and the List/Map switch only
+ * appears when there are results — so the same search took two lines with
+ * results and one without.
+ */
+test('the results toolbar keeps its line count whether or not there are results', async ({ page }) => {
+  const withResults = '/?postcode=B1%201BB&radius=1';
+  // No school type matches this, so the same search returns nothing.
+  const without = `${withResults}&school_type=no-such-type`;
+
+  const lines = async (url: string) => {
+    await page.goto(url);
+    // By label: the input is a combobox when autosuggest is on.
+    const input = page.getByLabel('School name or postcode', { exact: true });
+    const filters = page.getByRole('group', { name: 'Filters' });
+    await expect(filters).toBeVisible({ timeout: 15_000 });
+    const a = (await input.boundingBox())!;
+    const b = (await filters.boundingBox())!;
+    return b.y >= a.y + a.height ? 2 : 1;
+  };
+  const view = page.getByRole('group', { name: 'Results view' });
+
+  for (const [width, expected] of [[1400, 1], [1100, 2]] as const) {
+    await page.setViewportSize({ width, height: 800 });
+    expect(await lines(withResults), `${width}px with results`).toBe(expected);
+    await expect(view).toBeVisible();
+    expect(await lines(without), `${width}px without results`).toBe(expected);
+    await expect(view).toHaveCount(0);
+  }
+});
+
 /*
  * Desktop opens a postcode search on the map (mockup B): the list in a pane on
  * the left, the map filling the rest of the screen, and a card on the map for
@@ -561,8 +621,18 @@ test('a desktop postcode search opens on the map with the list beside it', async
   const pane = page.locator('[class*="mapListPane"]');
   const card = pane.locator('[data-urn]').first();
   await expect(card).toBeVisible({ timeout: 15_000 });
+  // The list view's own row, not a cut-down card: it carries the same View
+  // link and Compare button.
+  await expect(card.getByRole('link', { name: 'View', exact: true })).toBeVisible();
+  await expect(card.getByRole('button', { name: /Compar/ })).toBeVisible();
   await expect(page.locator('.sc-pin').first()).toBeVisible({ timeout: 15_000 });
 
+  // The count and the sort share one line at the top of the list.
+  const heading = await pane.getByRole('heading', { level: 2 }).boundingBox();
+  const sort = await pane.getByRole('combobox').boundingBox();
+  expect(Math.abs((heading!.y + heading!.height / 2) - (sort!.y + sort!.height / 2)))
+    .toBeLessThan(8);
+
   // The split runs to the bottom of the screen rather than stopping short.
   const split = await page.locator('[class*="mapViewContainer"]').boundingBox();
   expect(split!.y + split!.height).toBeGreaterThan(800 - 40);
@@ -574,6 +644,23 @@ test('a desktop postcode search opens on the map with the list beside it', async
   await card.click({ position: { x: 6, y: 6 } });
   await expect(page.locator('.sc-pin--selected')).toHaveCount(1);
   await expect(page.locator('.sc-popup')).toContainText(name);
+  // The card's View link is drawn like the list's, not in Leaflet's link blue.
+  // Polled, because .btn transitions its colour.
+  const colour = (l: Locator) => l.evaluate(el => getComputedStyle(el).color);
+  const listViewColour = await colour(card.getByRole('link', { name: 'View', exact: true }));
+  await expect.poll(() => colour(page.locator('.sc-popup').getByRole('link', { name: 'View', exact: true })))
+    .toBe(listViewColour);
+
+  // And from the keyboard: each row has a "Show … on the map" button that
+  // appears on focus.
+  const second = pane.locator('[data-urn]').nth(1);
+  const secondName = (await second.locator('a').first().innerText()).trim();
+  const show = second.getByRole('button', { name: `Show ${secondName} on the map` });
+  await show.focus();
+  await expect(show).toBeVisible();
+  await page.keyboard.press('Enter');
+  await expect(show).toHaveAttribute('aria-pressed', 'true');
+  await expect(page.locator('.sc-popup')).toContainText(secondName);
 });
 
 // 402 is the iPhone 17, where the toolbar overflowed (see below).
@@ -629,7 +716,8 @@ for (const width of [360, 390, 402, 430]) {
     const small = await page.evaluate(() => {
       const toolbar = document.querySelector('[class*="resultsToolbar"]');
       const fabEl = document.querySelector('[class*="viewFab"]');
-      return [...(toolbar?.querySelectorAll('a, button, input, select') ?? []), fabEl]
+      const closeEl = document.querySelector('[class*="closeSheetBtn"]');
+      return [...(toolbar?.querySelectorAll('a, button, input, select') ?? []), fabEl, closeEl]
         .filter((el): el is HTMLElement => !!el && !!(el as HTMLElement).offsetParent)
         .map((el) => ({ t: el.innerText?.trim().slice(0, 24) || el.getAttribute('aria-label'),
           w: el.getBoundingClientRect().width, h: el.getBoundingClientRect().height }))

nextjs-app/__tests__/components/FilterBarPhase.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen, within } from '@testing-library/react';
+import { FilterBar } from '@/components/FilterBar';
+
+let searchParams = new URLSearchParams();
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => searchParams,
+}));
+
+const FILTERS = {
+  local_authorities: [], school_types: [], years: [],
+  phases: ['Primary', 'Secondary', 'All-through'],
+  genders: [], admissions_policies: [],
+};
+
+/**
+ * The phase options must not come from the result set. The backend scopes its
+ * result filters to the schools it returns, and it applies the phase filter
+ * first — so with "secondary" chosen the scoped list holds only secondary-ish
+ * phases, and switching to primary meant going back to "Any phase" first.
+ */
+describe('FilterBar phase options', () => {
+  it('offers every phase while a phase filter narrows the results', () => {
+    searchParams = new URLSearchParams('search=hampton&phase=secondary');
+    render(
+      <FilterBar
+        filters={FILTERS}
+        resultFilters={{
+          local_authorities: [], school_types: [],
+          phases: ['Secondary', 'All-through'],
+          genders: [], admissions_policies: [],
+        }}
+      />,
+    );
+    const phase = screen.getByRole('combobox', { name: 'Phase' });
+    expect(within(phase).getByRole('option', { name: 'Primary' })).toBeInTheDocument();
+    expect(phase).toHaveValue('secondary');
+  });
+});

nextjs-app/__tests__/components/FilterBarRadius.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FilterBar } from '@/components/FilterBar';
+
+const push = jest.fn();
+let searchParams = new URLSearchParams();
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push, replace: jest.fn(), prefetch: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => searchParams,
+}));
+
+const FILTERS = {
+  local_authorities: [], school_types: [], years: [], phases: [],
+  genders: [], admissions_policies: [],
+};
+
+beforeEach(() => {
+  push.mockClear();
+  searchParams = new URLSearchParams();
+});
+
+describe('FilterBar default distance', () => {
+  it('searches a new postcode within half a mile', async () => {
+    render(<FilterBar filters={FILTERS} />);
+    await userEvent.type(screen.getByPlaceholderText(/School name or postcode/i), 'SW19 6AR{Enter}');
+    await waitFor(() => expect(push).toHaveBeenCalledWith(expect.stringContaining('radius=0.5')));
+  });
+
+  it('shows half a mile when the URL carries a postcode but no radius', () => {
+    searchParams = new URLSearchParams('postcode=SW196AR');
+    render(<FilterBar filters={FILTERS} />);
+    expect(screen.getByRole('combobox', { name: 'Distance' })).toHaveValue('0.5');
+  });
+
+  it('keeps a distance the user already chose', async () => {
+    searchParams = new URLSearchParams('postcode=SW196AR&radius=3');
+    render(<FilterBar filters={FILTERS} />);
+    expect(screen.getByRole('combobox', { name: 'Distance' })).toHaveValue('3');
+  });
+});
+
+describe('FilterBar distance options', () => {
+  it('offers a quarter mile without making it the default', () => {
+    searchParams = new URLSearchParams('postcode=SW196AR');
+    render(<FilterBar filters={FILTERS} />);
+    const distance = screen.getByRole('combobox', { name: 'Distance' });
+    expect([...(distance as HTMLSelectElement).options].map(o => o.value)).toEqual(['0.25', '0.5', '1', '3', '5']);
+    expect(distance).toHaveValue('0.5');
+  });
+});

nextjs-app/__tests__/components/HomeView.staleFetch.test.tsx

@@ -18,7 +18,10 @@ jest.mock('@/lib/api', () => ({
   fetchNationalAverages: jest.fn(async () => ({})),
   fetchLAaverages: jest.fn(async () => ({ secondary: { attainment_8_by_la: {} } })),
 }));
-jest.mock('@/components/FilterBar', () => ({ FilterBar: () => null }));
+// Renders only the List/Map switch HomeView hands it, which lives in its row.
+jest.mock('@/components/FilterBar', () => ({
+  FilterBar: ({ viewSwitch }: { viewSwitch?: unknown }) => viewSwitch || null,
+}));
 jest.mock('@/components/SchoolRow', () => ({ SchoolRow: ({ school }: {school: School}) => <div>{school.school_name}</div> }));
 jest.mock('@/components/SchoolMap', () => ({ SchoolMap: ({ schools }: {schools: School[]}) => <div data-testid="map">{schools.map(s => s.school_name).join(',')}</div> }));
 

nextjs-app/__tests__/components/ResultsMapView.test.tsx

@@ -24,7 +24,10 @@ jest.mock('@/lib/api', () => ({
   fetchNationalAverages: jest.fn(),
   fetchLAaverages: jest.fn(async () => ({ secondary: { attainment_8_by_la: {} } })),
 }));
-jest.mock('@/components/FilterBar', () => ({ FilterBar: () => null }));
+// Renders only the List/Map switch HomeView hands it, which lives in its row.
+jest.mock('@/components/FilterBar', () => ({
+  FilterBar: ({ viewSwitch }: { viewSwitch?: unknown }) => viewSwitch || null,
+}));
 jest.mock('@/components/SchoolMap', () => ({
   SchoolMap: ({ selectedUrn, radiusMiles, onMarkerClick, schools }: {
     selectedUrn: number | null; radiusMiles?: number;
@@ -94,7 +97,8 @@ it('lists a name search, which has no map', async () => {
 
 it('puts the count and the sort in the list beside the map, once', async () => {
   await renderMap();
-  expect(screen.getAllByRole('heading', { name: /3 schools within 1.0 miles of SW196AR/ })).toHaveLength(1);
+  // Short beside the map, so it shares one line with the sort.
+  expect(screen.getAllByRole('heading', { name: '3 schools within 1 mile' })).toHaveLength(1);
   expect(screen.getAllByRole('combobox')).toHaveLength(1);
 });
 
@@ -104,11 +108,11 @@ it('selects the pin from the card, and the card from the pin', async () => {
 
   fireEvent.click(within(card(1)).getByText(/pupils/));
   expect(screen.getByTestId('map')).toHaveAttribute('data-selected', '1');
-  expect(card(1).className).toMatch(/compactItemSelected/);
+  expect(card(1).className).toMatch(/mapRowSelected/);
 
   fireEvent.click(screen.getByRole('button', { name: 'pin' }));
-  expect(card(2).className).toMatch(/compactItemSelected/);
+  expect(card(2).className).toMatch(/mapRowSelected/);
-  expect(card(1).className).not.toMatch(/compactItemSelected/);
+  expect(card(1).className).not.toMatch(/mapRowSelected/);
 });
 
 it('clicking a card\'s link or button does not also select it', async () => {
@@ -121,8 +125,9 @@ it('clicking a card\'s link or button does not also select it', async () => {
 it('shows the England comparison for mainstream schools only, and never a placeholder 0%', async () => {
   const { container } = await renderMap();
   const card = (urn: number) => container.querySelector(`[data-urn="${urn}"]`) as HTMLElement;
-  expect(card(2)).toHaveTextContent('52% RWM -10 pts · 269 pupils');
+  expect(card(2)).toHaveTextContent('52%Reading, Writing & Maths-10 pts vs national');
-  expect(card(3)).toHaveTextContent('62 pupils');
+  expect(card(2)).toHaveTextContent('269pupils');
+  expect(card(3)).toHaveTextContent('62pupils');
   expect(card(3)).not.toHaveTextContent(/%|pts/);
 });
 
@@ -152,3 +157,39 @@ it('builds no list cards on a phone, where the pane is hidden', async () => {
   // The count stays: it is the pane's heading, shown above the map.
   expect(screen.getByRole('heading', { name: /3 schools within/ })).toBeInTheDocument();
 });
+
+it('draws the list view\'s own row beside the map, with the same content', async () => {
+  const { container } = await renderMap();
+  const beside = container.querySelector('[data-urn="2"] > [class~="row"]')!.textContent;
+
+  fireEvent.click(screen.getByRole('button', { name: 'List' }));
+  const row = screen.getByRole('link', { name: 'Southmead Primary School' }).closest('[class~="row"]')!;
+  expect(row.parentElement?.className).toMatch(/schoolList/);
+  expect(row.textContent).toBe(beside);
+});
+
+it('lets a keyboard pick a pin from the list, with a real button', async () => {
+  await renderMap();
+  const show = screen.getByRole('button', { name: 'Show Southmead Primary School on the map' });
+  expect(show).toHaveAttribute('aria-pressed', 'false');
+  fireEvent.click(show);
+  expect(screen.getByTestId('map')).toHaveAttribute('data-selected', '2');
+  expect(show).toHaveAttribute('aria-pressed', 'true');
+});
+
+it('keeps the postcode in the heading in list view, where there is room', async () => {
+  await renderMap();
+  fireEvent.click(screen.getByRole('button', { name: 'List' }));
+  expect(screen.getByRole('heading', { name: '3 schools within 1 mile of SW196AR' })).toBeInTheDocument();
+});
+
+it('draws and names a quarter-mile search as 0.25, not rounded to 0.3', async () => {
+  params = new URLSearchParams('postcode=SW196AR&radius=0.25');
+  const quarter = { ...results(), location_info: { postcode: 'SW196AR', radius: 0.25 * 1.60934, coordinates: [51.42, -0.21] } } as SchoolsResponse;
+  render(<HomeView initialSchools={quarter} filters={filters} />);
+  await act(async () => {});
+  expect(screen.getByTestId('map')).toHaveAttribute('data-radius', '0.25');
+  expect(screen.getByRole('heading', { name: '3 schools within 0.25 miles' })).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button', { name: 'List' }));
+  expect(screen.getByRole('heading', { name: '3 schools within 0.25 miles of SW196AR' })).toBeInTheDocument();
+});

nextjs-app/__tests__/components/rowContainerGuard.test.ts

@@ -0,0 +1,41 @@
+import fs from 'fs';
+import path from 'path';
+
+/*
+ * SchoolRow and SecondarySchoolRow switch to their narrow layout with a
+ * container query on a `results` container, not a media query, because the
+ * same row fills the phone list and the narrow list beside the desktop map.
+ * Outside a `results` container the query never matches and the row keeps its
+ * wide layout on a phone, a silent regression rather than an error.
+ *
+ * HomeView provides the container on every list it renders the rows into.
+ * Anything else that starts rendering them must do the same; this fails so
+ * that the person adding it reads this first.
+ */
+
+const ROOT = path.join(__dirname, '..', '..');
+const DIRS = ['app', 'components', 'lib'];
+const ROW_IMPORT = /from\s+['"][^'"]*\/(SchoolRow|SecondarySchoolRow)['"]/;
+
+function sources(dir: string): string[] {
+  return fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) return entry.name === 'node_modules' ? [] : sources(full);
+    return /\.tsx?$/.test(entry.name) ? [full] : [];
+  });
+}
+
+it('renders the results rows only where a `results` container is provided', () => {
+  const importers = DIRS.flatMap((d) => sources(path.join(ROOT, d)))
+    .filter((file) => ROW_IMPORT.test(fs.readFileSync(file, 'utf8')))
+    .map((file) => path.relative(ROOT, file));
+  expect(importers).toEqual(['components/HomeView.tsx']);
+});
+
+it('gives each of HomeView\'s row lists the `results` container', () => {
+  const css = fs.readFileSync(path.join(ROOT, 'components', 'HomeView.module.css'), 'utf8');
+  for (const list of ['.schoolList', '.compactList', '.bottomSheet']) {
+    const rule = new RegExp(`\\${list}\\s*\\{[^}]*container:\\s*results\\s*/\\s*inline-size`);
+    expect({ list, provided: rule.test(css) }).toEqual({ list, provided: true });
+  }
+});

nextjs-app/app/(frontend)/globals.css

@@ -645,6 +645,13 @@ html .leaflet-container a.leaflet-popup-close-button:focus {
     color: var(--text-primary);
 }
 
+/* The popup card's View link is a .btn-tertiary, which leaflet.css's
+   `.leaflet-container a` (0,1,1) paints #0078A8 over its 0,1,0. Its hover
+   rule, at 0,3,0, still wins over this. */
+html .leaflet-container a.btn-tertiary {
+    color: var(--text-secondary);
+}
+
 /* Main content column */
 .main {
     max-width: 1400px;

nextjs-app/app/(frontend)/page.tsx

@@ -6,7 +6,7 @@
 import { absoluteUrl } from '@/lib/site';
 import type { Metadata } from 'next';
 import { fetchSchools, fetchFilters, fetchDataInfo } from '@/lib/api';
-import { formatAcademicYear } from '@/lib/utils';
+import { DEFAULT_RADIUS_MILES, formatAcademicYear } from '@/lib/utils';
 import { HomeView } from '@/components/HomeView';
 import { getFlags } from '@/lib/flags';
 import { HowItWorksSection } from '@/components/HowItWorksSection';
@@ -71,7 +71,9 @@ export default async function HomePage({ searchParams }: HomePageProps) {
 
   // Parse search params
   const page = parseInt(params.page || '1');
-  const radius = params.radius ? parseFloat(params.radius) : undefined;
+  // Without this the API applies its own 5-mile default while the Distance
+  // control shows DEFAULT_RADIUS_MILES.
+  const radius = params.radius ? parseFloat(params.radius) : DEFAULT_RADIUS_MILES;
 
   // Check if user has performed a search
   const hasSearchParams = !!(

nextjs-app/components/FilterBar.module.css

@@ -40,8 +40,19 @@
   margin: 0 auto 1.5rem;
 }
 
-/* One row where it fits: the search takes what the controls leave, and the
+/*
-   "More filters" panel breaks onto its own line below both. */
+ * One row on wide screens, two below 1340px — decided by the width alone,
+ * never by what the search returned.
+ *
+ * The row once wrapped wherever it ran out of room, and its contents change
+ * with the results: the List/Map switch beside it, the distance chip and Clear
+ * all come and go. So the same search folded onto two lines when it had
+ * results and sat on one when it had none. Now the controls never wrap away
+ * from the search on a wide screen; the search box takes what they leave, and
+ * 1340px is where the fullest toolbar (distance, phase, type, More filters,
+ * Clear and the switch) still leaves it 12rem. The "More filters" panel breaks
+ * onto its own line below both.
+ */
 .filterBar:not(.heroMode) {
   display: flex;
   flex-wrap: wrap;
@@ -56,10 +67,34 @@
 }
 
 .filterBar:not(.heroMode) .searchSection {
-  flex: 1 1 320px;
+  flex: 1 1 0;
   min-width: 0;
 }
 
+.filterBar:not(.heroMode) .controlsRow {
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+}
+
+/* The List/Map switch closes the line; the "More filters" panel follows it. */
+.viewSwitchSlot {
+  flex: 0 0 auto;
+  order: 1;
+}
+
+/* Below that, the switch stays up beside the search and the controls always
+   take a full-width line of their own, results or not. */
+@media (min-width: 641px) and (max-width: 1339px) {
+  .viewSwitchSlot {
+    order: 0;
+  }
+
+  .filterBar:not(.heroMode) .controlsRow {
+    flex-basis: 100%;
+    flex-wrap: wrap;
+  }
+}
+
 /* Only phones fold the form away; see the 640px block. */
 .searchSummary {
   display: none;
@@ -324,8 +359,9 @@
   font-weight: 500;
   white-space: nowrap;
   /* A select is as wide as its longest option, and a school type can run to
-     "Academy special sponsor led". Cap it; the chosen value truncates. */
+     "Academy special sponsor led". Cap it; the chosen value truncates. The cap
-  max-width: 14rem;
+     is part of the one-line budget above. */
+  max-width: 11rem;
   text-overflow: ellipsis;
 }
 
@@ -363,6 +399,7 @@
    pushing the results off a short screen. The 3px gutter keeps the selects'
    focus rings clear of the scroll clip. */
 .filters {
+  order: 2;
   flex-basis: 100%;
   display: flex;
   gap: 0.625rem;
@@ -579,6 +616,12 @@
     display: none;
   }
 
+  /* Phones switch views with the floating button (HomeView, .mobileDock). An
+     empty slot would still take a gap in this column. */
+  .viewSwitchSlot {
+    display: none;
+  }
+
   /* Bleeds to the screen edge so a chip scrolls out from under it, rather than
      being cut off at the toolbar's padding. The toolbar's inline padding is
      1rem at this width (HomeView.module.css, .resultsToolbar). The 4px of

nextjs-app/components/FilterBar.tsx

@@ -3,7 +3,7 @@
 import { useState, useCallback, useTransition, useRef, useEffect } from "react";
 import type { ReactNode } from "react";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { isValidPostcode, schoolUrl } from "@/lib/utils";
+import { DEFAULT_RADIUS_MILES, isValidPostcode, schoolUrl } from "@/lib/utils";
 import { track } from "@/lib/analytics";
 import { useSchoolSuggest } from "@/hooks/useSchoolSuggest";
 import { SuggestList, suggestOptionId } from "./SuggestList";
@@ -22,6 +22,12 @@ interface FilterBarProps {
   geoError?: string | null;
   /** Server-read feature flag. Off means no listener, no fetch, no markup. */
   autosuggest?: boolean;
+  /**
+   * The results page's List/Map switch. It sits in this bar's own row rather
+   * than beside it, so that when the bar takes two lines the filters' line
+   * runs the full width instead of stopping short of the switch.
+   */
+  viewSwitch?: ReactNode;
 }
 
 /**
@@ -54,6 +60,7 @@ export function FilterBar({
   geoState = "idle",
   geoError,
   autosuggest = false,
+  viewSwitch,
 }: FilterBarProps) {
   const router = useRouter();
   const pathname = usePathname();
@@ -63,7 +70,7 @@ export function FilterBar({
 
   const currentSearch = searchParams.get("search") || "";
   const currentPostcode = searchParams.get("postcode") || "";
-  const currentRadius = searchParams.get("radius") || "1";
+  const currentRadius = searchParams.get("radius") || String(DEFAULT_RADIUS_MILES);
   const initialOmniValue = currentPostcode || currentSearch;
 
   const [omniValue, setOmniValue] = useState(initialOmniValue);
@@ -262,7 +269,7 @@ export function FilterBar({
     if (isPostcode) {
       updateURL({
         postcode: cleaned.toUpperCase(),
-        radius: currentRadius || "1",
+        radius: currentRadius,
         search: "",
       });
     } else {
@@ -295,7 +302,10 @@ export function FilterBar({
   const laOptions =
     resultFilters?.local_authorities ?? filters.local_authorities;
   const typeOptions = resultFilters?.school_types ?? filters.school_types;
-  const phaseOptions = resultFilters?.phases ?? filters.phases ?? [];
+  // Phase is the exception: always the full list. The result set has already
+  // been narrowed by the phase filter, so scoping to it would leave only the
+  // chosen phase on offer and switching phase would need "Any phase" first.
+  const phaseOptions = filters.phases ?? [];
   const genderOptions = resultFilters?.genders ?? filters.genders ?? [];
   const admissionsPolicyOptions =
     resultFilters?.admissions_policies ?? filters.admissions_policies ?? [];
@@ -449,6 +459,9 @@ export function FilterBar({
 
       {!isHero && (
         <>
+          {viewSwitch && (
+            <div className={styles.viewSwitchSlot}>{viewSwitch}</div>
+          )}
           {/* Every control here is a real <select> or <button>, drawn as a
               pill. On phones the row scrolls sideways rather than wrapping, so
               the pinned toolbar stays two lines tall. */}
@@ -468,6 +481,7 @@ export function FilterBar({
                   aria-label="Distance"
                   disabled={isPending}
                 >
+                  <option value="0.25">Within 0.25 miles</option>
                   <option value="0.5">Within 0.5 miles</option>
                   <option value="1">Within 1 mile</option>
                   <option value="3">Within 3 miles</option>

nextjs-app/components/HomeView.module.css

@@ -591,7 +591,7 @@
 
 .mapViewContainer {
   display: grid;
-  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
+  grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
   height: calc(100dvh - var(--map-top) - var(--map-bottom));
   min-height: 480px;
   background: var(--bg-card);
@@ -608,13 +608,32 @@
   border-right: 1px solid var(--border);
 }
 
+/* One line: the count takes what the sort leaves, and truncates rather than
+   wrap if a narrow pane cannot fit both. */
 .mapListPane .resultsHeader {
-  gap: 0.5rem;
+  flex-wrap: nowrap;
+  gap: 0.75rem;
   padding: 0.875rem 1rem 0.75rem;
 }
 
 .mapListPane .resultsHeader h2 {
-  font-size: var(--step-1);
+  flex: 1;
+  min-width: 0;
+  font-size: var(--step-0);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mapListPane .resultsHeaderActions {
+  flex-shrink: 0;
+}
+
+/* A select is as wide as its longest option ("Highest Reading, Writing &
+   Maths %", 281px), more than half the pane. Cap it; a long choice truncates. */
+.mapListPane .sortSelect {
+  max-width: 11rem;
+  text-overflow: ellipsis;
 }
 
 .mapContainer {
@@ -631,117 +650,53 @@
   overflow-y: auto;
   padding: 0.125rem 1rem 1rem;
   scrollbar-width: thin;
+  /* The rows lay themselves out by this list's width (SchoolRow.module.css),
+     which here is always narrow, whatever the screen. */
+  container: results / inline-size;
 }
 
-/* Compact School Item: the list pane's card, and the phone's bottom sheet. */
+/* A row in the list beside the map: clicking it picks its pin. */
-.compactItem {
+.mapRow {
-  display: flex;
+  position: relative;
-  flex-direction: column;
-  gap: 0.4375rem;
-  padding: 0.75rem 0.875rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 10px;
   cursor: pointer;
-  transition: border-color var(--transition), box-shadow var(--transition);
+  border-radius: 10px;
 }
 
-.compactItem:hover {
+.mapRowSelected > :last-child {
-  border-color: var(--border-strong);
+  outline: 2px solid var(--brand);
+  outline-offset: 1px;
 }
 
-.compactItemSelected,
+/* Visually hidden until focused, then a pill over the row's top edge. */
-.compactItemSelected:hover {
+.showOnMap {
-  border-color: var(--brand);
+  position: absolute;
-  box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.28);
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 
-.compactItemHeader {
+.showOnMap:focus-visible {
-  display: flex;
+  top: -0.5rem;
-  justify-content: space-between;
+  right: 0.75rem;
-  align-items: flex-start;
+  z-index: 1;
-  gap: 0.625rem;
+  width: auto;
-}
+  height: auto;
-
+  padding: 0.375rem 0.75rem;
-.compactItemName {
+  overflow: visible;
-  font-family: var(--font-display);
+  clip-path: none;
-  font-size: 0.9375rem;
-  font-weight: 700;
-  line-height: 1.3;
-  color: var(--text-primary);
-  text-decoration: none;
-}
-
-.compactItemName:hover {
-  color: var(--brand-strong);
-  text-decoration: underline;
-}
-
-.distanceBadge {
-  flex-shrink: 0;
-  padding: 0.125rem 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 700;
   background: var(--brand);
   color: var(--brand-on);
-  border-radius: 4px;
+  border: 0;
-  white-space: nowrap;
+  border-radius: 999px;
+  font-family: var(--font-ui);
+  font-size: var(--step--1);
+  font-weight: 700;
+  outline: 2px solid var(--text-primary);
+  outline-offset: 2px;
 }
 
-.compactItemTags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-}
-
-.compactBadge,
-.compactTag {
-  padding: 0.125rem 0.4375rem;
-  border-radius: 4px;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.compactTag {
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-
-.ofsted1,
-.ofsted2 { background: var(--status-above-bg); color: var(--status-above); }
-.ofsted3 { background: var(--status-below-bg); color: var(--status-below); }
-.ofsted4 { background: var(--status-below); color: var(--text-inverse); }
-.ofstedRc { background: var(--phase-secondary-text); color: var(--text-inverse); }
-.ofstedInspected { background: var(--phase-primary-bg); color: var(--phase-primary-text); }
-.ofstedPending { background: var(--border); color: var(--text-muted); }
-
-.compactItemFooter {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.compactStat {
-  font-size: 0.8125rem;
-  color: var(--text-secondary);
-}
-
-.compactStat strong {
-  font-size: 0.9375rem;
-  color: var(--text-primary);
-}
-
-.deltaUp { color: var(--status-above); font-weight: 600; }
-.deltaDown { color: var(--status-below); font-weight: 600; }
-
-.compactItemActions {
-  display: flex;
-  gap: 0.5rem;
-  flex-shrink: 0;
-}
 
 
 .sectionHeader {
@@ -779,6 +734,8 @@
   flex-direction: column;
   gap: 0.5rem;
   margin-bottom: 1.25rem;
+  /* The rows lay themselves out by this list's width (SchoolRow.module.css). */
+  container: results / inline-size;
 }
 
 /* Staggered fade-in for rows */
@@ -881,33 +838,37 @@
     animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
 
-  .bottomSheet .compactItem {
-    border: none;
-    box-shadow: none;
-    background: transparent;
-    padding: 1rem;
-    cursor: default;
-  }
 
+  /* A 30px circle, drawn by ::before, inside a 44px target (MOBILE.md). */
   .closeSheetBtn {
     position: absolute;
-    top: -12px;
+    top: -19px;
-    right: -12px;
+    right: -15px;
-    width: 30px;
+    width: 44px;
-    height: 30px;
+    height: 44px;
-    background: var(--bg-card);
+    padding: 0;
-    border: 1px solid var(--border);
+    background: none;
-    border-radius: 50%;
+    border: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
     color: var(--text-secondary);
     cursor: pointer;
-    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.1);
     z-index: 10;
   }
 
+  .closeSheetBtn::before {
+    content: '';
+    position: absolute;
+    inset: 7px;
+    z-index: -1;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.1);
+  }
+
   @keyframes slideUpSheet {
     from {
       transform: translateY(120%);
@@ -935,6 +896,13 @@
     display: none;
   }
 
+  /* The sheet holds one results row, which is the card itself. It is not
+     inside a `results` container, so give it one: a phone-width sheet takes
+     the row's narrow layout. */
+  .bottomSheet {
+    container: results / inline-size;
+  }
+
   .mapListPane .resultsHeader {
     padding: 0.625rem 0.875rem;
   }

nextjs-app/components/HomeView.tsx

@@ -16,8 +16,8 @@ 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, isSpecialSchool, listRwmValue } from '@/lib/utils';
 import { track } from '@/lib/analytics';
+import { DEFAULT_RADIUS_MILES } from '@/lib/utils';
 import styles from './HomeView.module.css';
 
 interface HomeViewProps {
@@ -341,6 +341,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
     setIsLoadingMap(true);
     const params: Record<string, any> = {};
     searchParams.forEach((value, key) => { params[key] = value; });
+    params.radius ??= DEFAULT_RADIUS_MILES;
     params.page = 1;
     params.page_size = 500;
     fetchSchools(params, { cache: 'no-store', signal: controller.signal })
@@ -420,7 +421,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
             setGeoState('idle');
             track('near_me_used', { outcome: 'granted' });
             track('search_submitted', { query: postcode, via: 'near_me', has_postcode: true, filters_active: '', filters_count: 0 });
-            router.push(`/?postcode=${encodeURIComponent(postcode)}&radius=1`);
+            router.push(`/?postcode=${encodeURIComponent(postcode)}&radius=${DEFAULT_RADIUS_MILES}`);
           } else {
             track('near_me_used', { outcome: 'no_postcode' });
             setGeoState('error');
@@ -460,8 +461,9 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
   // open card); only the list beside it is sorted.
   const mapResultSchools = mapSchools.length > 0 ? mapSchools : initialSchools.schools;
   const mapListSchools = sortSchools(mapResultSchools);
+  // Two places, so a 0.25-mile search is not drawn or labelled as 0.3.
   const radiusMiles = initialSchools.location_info
-    ? Number((initialSchools.location_info.radius / 1.60934).toFixed(1))
+    ? Number((initialSchools.location_info.radius / 1.60934).toFixed(2))
     : undefined;
 
   // Empty-results sentinel: track when a search returns nothing.
@@ -558,14 +560,46 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
 
   const isMapView = initialSchools.schools.length > 0 && resultsView === 'map' && isLocationSearch;
 
+  // One school as a results row: the list view, the list beside the map and
+  // the phone's bottom sheet all draw the same thing.
+  const renderRow = (school: School) => (
+    school.attainment_8_score != null ? (
+      <SecondarySchoolRow
+        key={school.urn}
+        school={school}
+        isLocationSearch={isLocationSearch}
+        onAddToCompare={addSchoolFromSearch}
+        onRemoveFromCompare={removeSchool}
+        isInCompare={compareUrns.includes(school.urn)}
+        laAvgAttainment8={school.local_authority ? laAverages[school.local_authority] ?? null : null}
+      />
+    ) : (
+      <SchoolRow
+        key={school.urn}
+        school={school}
+        isLocationSearch={isLocationSearch}
+        onAddToCompare={addSchoolFromSearch}
+        onRemoveFromCompare={removeSchool}
+        isInCompare={compareUrns.includes(school.urn)}
+        nationalAvgRwm={nationalAvgRwm}
+      />
+    )
+  );
+
+  const schoolCount = `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''}`;
+
   // 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
+        {/* Beside the map the heading shares one line with the sort, so it
-          ? `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''} within ${(initialSchools.location_info.radius / 1.60934).toFixed(1)} miles of ${initialSchools.location_info.postcode}`
+            drops the postcode, which the search box just above already shows. */}
-          : `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''} found`
+        {isMapView && radiusMiles != null
+          ? `${schoolCount} within ${radiusMiles} mile${radiusMiles === 1 ? '' : 's'}`
+          : isLocationSearch && radiusMiles != null && initialSchools.location_info
+          ? `${schoolCount} within ${radiusMiles} mile${radiusMiles === 1 ? '' : 's'} of ${initialSchools.location_info.postcode}`
+          : `${schoolCount} found`
         }
       </h2>
       <div className={styles.resultsHeaderActions}>
@@ -682,8 +716,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
             geoState={geoState}
             geoError={geoError}
             autosuggest={autosuggest}
-          />
+            viewSwitch={hasViewSwitch && (
-          {hasViewSwitch && (
               <div className={styles.viewSwitch} role="group" aria-label="Results view">
                 <button
                   type="button"
@@ -705,6 +738,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
                 </button>
               </div>
             )}
+          />
         </div>
       )}
 
@@ -797,17 +831,32 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
             <div className={styles.mapListPane}>
               {resultsHeader}
               <div ref={mapListRef} className={styles.compactList}>
+                {/* The list view's own rows, so both views show the same thing.
+                    Clicking a row (not its links or buttons) picks its pin. */}
                 {listPaneShown && mapListSchools.map((school) => (
-                  <CompactSchoolItem
+                  <div
                     key={school.urn}
-                    school={school}
+                    data-urn={school.urn}
-                    onAddToCompare={addSchoolFromSearch}
+                    className={`${styles.mapRow} ${selectedMapSchool?.urn === school.urn ? styles.mapRowSelected : ''}`}
-                    isInCompare={compareUrns.includes(school.urn)}
+                    onClick={(e) => {
-                    nationalAvgRwm={nationalAvgRwm}
+                      if ((e.target as HTMLElement).closest('a, button')) return;
-                    laAverages={laAverages}
+                      setSelectedMapSchool(school);
-                    isSelected={selectedMapSchool?.urn === school.urn}
+                    }}
-                    onSelect={setSelectedMapSchool}
+                  >
-                  />
+                    {/* The keyboard's way to pick the pin: hidden until it has
+                        focus, since a pointer just clicks the row. The row
+                        itself cannot be the button, as it holds links and
+                        buttons of its own. */}
+                    <button
+                      type="button"
+                      className={styles.showOnMap}
+                      aria-pressed={selectedMapSchool?.urn === school.urn}
+                      onClick={() => setSelectedMapSchool(school)}
+                    >
+                      Show {school.school_name} on the map
+                    </button>
+                    {renderRow(school)}
+                  </div>
                 ))}
               </div>
             </div>
@@ -831,29 +880,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
           /* List View Layout */
           <>
             <div className={styles.schoolList}>
-              {sortedSchools.map((school) => (
+              {sortedSchools.map(renderRow)}
-                school.attainment_8_score != null ? (
-                  <SecondarySchoolRow
-                    key={school.urn}
-                    school={school}
-                    isLocationSearch={isLocationSearch}
-                    onAddToCompare={addSchoolFromSearch}
-                    onRemoveFromCompare={removeSchool}
-                    isInCompare={selectedSchools.some(s => s.urn === school.urn)}
-                    laAvgAttainment8={school.local_authority ? laAverages[school.local_authority] ?? null : null}
-                  />
-                ) : (
-                  <SchoolRow
-                    key={school.urn}
-                    school={school}
-                    isLocationSearch={isLocationSearch}
-                    onAddToCompare={addSchoolFromSearch}
-                    onRemoveFromCompare={removeSchool}
-                    isInCompare={selectedSchools.some(s => s.urn === school.urn)}
-                    nationalAvgRwm={nationalAvgRwm}
-                  />
-                )
-              ))}
             </div>
 
             {(hasMore || allSchools.length < initialSchools.total) && (
@@ -899,14 +926,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
               >
                 ×
               </button>
-              <CompactSchoolItem
+              {renderRow(selectedMapSchool)}
-                school={selectedMapSchool}
-                onAddToCompare={addSchoolFromSearch}
-                isInCompare={compareUrns.includes(selectedMapSchool.urn)}
-                nationalAvgRwm={nationalAvgRwm}
-                laAverages={laAverages}
-                showView
-              />
             </div>
           )}
         </div>
@@ -914,106 +934,3 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
     </div>
   );
 }
-
-/* 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, laAverages, isSelected, onSelect, showView,
-}: CompactSchoolItemProps) {
-  const ofstedBadge = buildOfstedListBadge(school);
-  const special = isSpecialSchool(school);
-  const href = schoolUrl(school.urn, school.school_name);
-
-  /*
-   * 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 handleClick = (e: React.MouseEvent) => {
-    if ((e.target as HTMLElement).closest('a, button')) return;
-    onSelect?.(school);
-  };
-
-  return (
-    <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.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>
-  );
-}

nextjs-app/components/SchoolRow.module.css

@@ -220,7 +220,16 @@
 .vsNationalFlat { font-size: 0.7rem; color: var(--text-muted); }
 
 /* ── Mobile ──────────────────────────────────────────── */
-@media (max-width: 640px) {
+/*
+ * Narrow: content full width, actions in a row beneath. Keyed to the list the
+ * row sits in, not the screen, because the same row fills the phone list and
+ * the ~430px list beside the map on desktop. HomeView makes its lists a
+ * `results` container; outside one, the row keeps its wide layout, which is
+ * why rowContainerGuard.test.ts fails if anything else renders this row.
+ * 608px is exact: below 769px the page pads 1rem each side, so a 640px screen
+ * gives a 608px list, matching the old max-width: 640px media query.
+ */
+@container results (max-width: 608px) {
   .row {
     flex-wrap: wrap;
     padding: 0.875rem;

nextjs-app/components/SecondarySchoolRow.module.css

@@ -232,7 +232,16 @@
 }
 
 /* ── Mobile ──────────────────────────────────────────── */
-@media (max-width: 640px) {
+/*
+ * Narrow: content full width, actions in a row beneath. Keyed to the list the
+ * row sits in, not the screen, because the same row fills the phone list and
+ * the ~430px list beside the map on desktop. HomeView makes its lists a
+ * `results` container; outside one, the row keeps its wide layout, which is
+ * why rowContainerGuard.test.ts fails if anything else renders this row.
+ * 608px is exact: below 769px the page pads 1rem each side, so a 640px screen
+ * gives a 608px list, matching the old max-width: 640px media query.
+ */
+@container results (max-width: 608px) {
   .row {
     flex-wrap: wrap;
     padding: 0.875rem;

nextjs-app/lib/utils.ts

@@ -235,6 +235,9 @@ export function getVariabilityLabel(stdDev: number | null): string {
 // Validation
 // ============================================================================
 
+/** Radius a postcode search uses until the user picks another. */
+export const DEFAULT_RADIUS_MILES = 0.5;
+
 /**
  * Validate UK postcode format
  */