fix(search): set the toolbar's line count by width, not by results

The results toolbar 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.

From 1340px the controls never wrap away from the search, which takes
what they leave (at least 12rem); phase and type chips cap at 11rem to
fit. Between 641px and 1339px the controls always take a full line of
their own. The switch now sits in FilterBar's row via a viewSwitch slot,
so that line runs the full width instead of stopping short of it.

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)
-        if allowed:
-            df_latest = df_latest[df_latest["phase"].str.lower().isin(allowed)]
+        allowed = PHASE_GROUPS.get(phase_lower, {phase_lower})
+        df_latest = df_latest[df_latest["phase"].fillna("").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

@@ -272,6 +272,31 @@ test('searching by postcode returns nearby schools', async ({ page }) => {
   await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
 });
 
+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 }) => {
   // List/map badges keyed off ofsted_grade (the carried-forward legacy grade)
   // and never reached the report-card branch, so report-card schools were
@@ -547,6 +572,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 +618,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 +641,17 @@ 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);
+
+  // 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 +707,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/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(1).className).not.toMatch(/compactItemSelected/);
+  expect(card(2).className).toMatch(/mapRowSelected/);
+  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(3)).toHaveTextContent('62 pupils');
+  expect(card(2)).toHaveTextContent('52%Reading, Writing & Maths-10 pts vs national');
+  expect(card(2)).toHaveTextContent('269pupils');
+  expect(card(3)).toHaveTextContent('62pupils');
   expect(card(3)).not.toHaveTextContent(/%|pts/);
 });
 
@@ -152,3 +157,28 @@ 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.0 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/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. */
-  max-width: 14rem;
+     "Academy special sponsor led". Cap it; the chosen value truncates. The cap
+     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

@@ -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();
@@ -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. */}

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. */
-.compactItem {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4375rem;
-  padding: 0.75rem 0.875rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 10px;
+/* A row in the list beside the map: clicking it picks its pin. */
+.mapRow {
+  position: relative;
   cursor: pointer;
-  transition: border-color var(--transition), box-shadow var(--transition);
+  border-radius: 10px;
 }
 
-.compactItem:hover {
-  border-color: var(--border-strong);
+.mapRowSelected > :last-child {
+  outline: 2px solid var(--brand);
+  outline-offset: 1px;
 }
 
-.compactItemSelected,
-.compactItemSelected:hover {
-  border-color: var(--brand);
-  box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.28);
+/* Visually hidden until focused, then a pill over the row's top edge. */
+.showOnMap {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 
-.compactItemHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 0.625rem;
-}
-
-.compactItemName {
-  font-family: var(--font-display);
-  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;
+.showOnMap:focus-visible {
+  top: -0.5rem;
+  right: 0.75rem;
+  z-index: 1;
+  width: auto;
+  height: auto;
+  padding: 0.375rem 0.75rem;
+  overflow: visible;
+  clip-path: none;
   background: var(--brand);
   color: var(--brand-on);
-  border-radius: 4px;
-  white-space: nowrap;
+  border: 0;
+  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;
-    right: -12px;
-    width: 30px;
-    height: 30px;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 50%;
+    top: -19px;
+    right: -15px;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    background: none;
+    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,7 +16,6 @@ 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 styles from './HomeView.module.css';
 
@@ -558,14 +557,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
-          ? `${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`
+        {/* Beside the map the heading shares one line with the sort, so it
+            drops the postcode, which the search box just above already shows. */}
+        {isMapView && radiusMiles != null
+          ? `${schoolCount} within ${radiusMiles} mile${radiusMiles === 1 ? '' : 's'}`
+          : isLocationSearch && initialSchools.location_info
+          ? `${schoolCount} within ${(initialSchools.location_info.radius / 1.60934).toFixed(1)} miles of ${initialSchools.location_info.postcode}`
+          : `${schoolCount} found`
         }
       </h2>
       <div className={styles.resultsHeaderActions}>
@@ -682,29 +713,29 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
             geoState={geoState}
             geoError={geoError}
             autosuggest={autosuggest}
+            viewSwitch={hasViewSwitch && (
+              <div className={styles.viewSwitch} role="group" aria-label="Results view">
+                <button
+                  type="button"
+                  className={styles.viewSwitchBtn}
+                  aria-pressed={resultsView === 'list'}
+                  onClick={() => changeView('list', 'toolbar')}
+                >
+                  <ListIcon />
+                  List
+                </button>
+                <button
+                  type="button"
+                  className={styles.viewSwitchBtn}
+                  aria-pressed={resultsView === 'map'}
+                  onClick={() => changeView('map', 'toolbar')}
+                >
+                  <MapIcon />
+                  Map
+                </button>
+              </div>
+            )}
           />
-          {hasViewSwitch && (
-            <div className={styles.viewSwitch} role="group" aria-label="Results view">
-              <button
-                type="button"
-                className={styles.viewSwitchBtn}
-                aria-pressed={resultsView === 'list'}
-                onClick={() => changeView('list', 'toolbar')}
-              >
-                <ListIcon />
-                List
-              </button>
-              <button
-                type="button"
-                className={styles.viewSwitchBtn}
-                aria-pressed={resultsView === 'map'}
-                onClick={() => changeView('map', 'toolbar')}
-              >
-                <MapIcon />
-                Map
-              </button>
-            </div>
-          )}
         </div>
       )}
 
@@ -797,17 +828,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}
-                    onAddToCompare={addSchoolFromSearch}
-                    isInCompare={compareUrns.includes(school.urn)}
-                    nationalAvgRwm={nationalAvgRwm}
-                    laAverages={laAverages}
-                    isSelected={selectedMapSchool?.urn === school.urn}
-                    onSelect={setSelectedMapSchool}
-                  />
+                    data-urn={school.urn}
+                    className={`${styles.mapRow} ${selectedMapSchool?.urn === school.urn ? styles.mapRowSelected : ''}`}
+                    onClick={(e) => {
+                      if ((e.target as HTMLElement).closest('a, button')) return;
+                      setSelectedMapSchool(school);
+                    }}
+                  >
+                    {/* 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 +877,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
           /* List View Layout */
           <>
             <div className={styles.schoolList}>
-              {sortedSchools.map((school) => (
-                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}
-                  />
-                )
-              ))}
+              {sortedSchools.map(renderRow)}
             </div>
 
             {(hasMore || allSchools.length < initialSchools.total) && (
@@ -899,14 +923,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
               >
                 ×
               </button>
-              <CompactSchoolItem
-                school={selectedMapSchool}
-                onAddToCompare={addSchoolFromSearch}
-                isInCompare={compareUrns.includes(selectedMapSchool.urn)}
-                nationalAvgRwm={nationalAvgRwm}
-                laAverages={laAverages}
-                showView
-              />
+              {renderRow(selectedMapSchool)}
             </div>
           )}
         </div>
@@ -914,106 +931,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;