test(e2e): scroll a long list, and wait out the popup crossfade

The pinned-toolbar journeys scrolled the results of a typed B1 1BB search.
At the new half-mile default that is two schools, so the page ended before
the toolbar had anything to stay pinned over (desktop scrollY stopped at
229; on phones the scroll reached the footer). They now open the search
at a mile, which is what they were measuring.

Leaflet crossfades popups for 200ms, so for that window there are two
.sc-popup elements, and a strict locator fails at once rather than
retrying. Wait for one popup before reading it.

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

e2e/tests/journeys.spec.ts

@@ -541,6 +541,13 @@ test('results map fullscreen falls back to an overlay on iOS', async ({ page })
   await expect(openFs).toBeVisible();
 });
 
+/*
+ * A postcode search with a list long enough to scroll. The default half mile
+ * finds two schools around B1 1BB, so the page ends before the toolbar has
+ * anything to stay pinned over; the scroll tests ask for a mile.
+ */
+const LONG_LIST = '/?postcode=B1%201BB&radius=1';
+
 /*
  * The results toolbar: search, filters and the List/Map switch pinned under
  * the header, so none of them scroll away with the results.
@@ -551,7 +558,7 @@ test('results map fullscreen falls back to an overlay on iOS', async ({ page })
  */
 test('the results toolbar stays pinned with its List/Map switch', async ({ page }) => {
   await page.setViewportSize({ width: 1280, height: 800 });
-  await searchByName(page, 'B1 1BB');
+  await page.goto(LONG_LIST);
   await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
 
   const view = page.getByRole('group', { name: 'Results view' });
@@ -582,7 +589,7 @@ test('the results toolbar stays pinned with its List/Map switch', async ({ page
  * 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';
+  const withResults = LONG_LIST;
   // No school type matches this, so the same search returns nothing.
   const without = `${withResults}&school_type=no-such-type`;
 
@@ -643,7 +650,15 @@ test('a desktop postcode search opens on the map with the list beside it', async
   const name = (await card.locator('a').first().innerText()).trim();
   await card.click({ position: { x: 6, y: 6 } });
   await expect(page.locator('.sc-pin--selected')).toHaveCount(1);
+  // Leaflet crossfades popups for 200ms, so two exist until the old one goes.
+  await expect(page.locator('.sc-popup')).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.
@@ -654,6 +669,7 @@ test('a desktop postcode search opens on the map with the list beside it', async
   await expect(show).toBeVisible();
   await page.keyboard.press('Enter');
   await expect(show).toHaveAttribute('aria-pressed', 'true');
+  await expect(page.locator('.sc-popup')).toHaveCount(1);
   await expect(page.locator('.sc-popup')).toContainText(secondName);
 });
 
@@ -661,7 +677,7 @@ test('a desktop postcode search opens on the map with the list beside it', async
 for (const width of [360, 390, 402, 430]) {
   test(`a phone opens on the map, with the list a tap away, at ${width}px`, async ({ page }) => {
     await page.setViewportSize({ width, height: 800 });
-    await searchByName(page, 'B1 1BB');
+    await page.goto(LONG_LIST);
 
     // On the map, with the floating button offering the list, clear of the
     // bottom tab bar.

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;