Merge pull request 'fix(search): stop the mobile sort dropdown overflowing the viewport' (#17) from fix/mobile-sort-select-overflow into main

Reviewed-on: #17

e2e/tests/journeys.spec.ts

@@ -100,15 +100,20 @@ test('compare chart on mobile shows school chips with tap-to-focus', async ({ pa
     links.map((l) => (l as HTMLAnchorElement).getAttribute('href') || '')
   );
   const urns = [...new Set(hrefs.map((h) => h.match(/\/school\/(\d+)/)?.[1]).filter(Boolean))];
-  expect(urns.length).toBeGreaterThanOrEqual(2);
+  // Compare three schools, not two: a "primary" search can return all-through
+  // schools that classify as secondary, and the chips only appear for the
+  // active phase. With three schools across two phases, the auto-selected
+  // majority phase always holds ≥2, so the chip legend is guaranteed to render.
+  expect(urns.length).toBeGreaterThanOrEqual(3);
 
-  await page.goto(`/compare?urns=${urns[0]},${urns[1]}`);
+  await page.goto(`/compare?urns=${urns[0]},${urns[1]},${urns[2]}`);
   await expect(page.locator('canvas:visible').first()).toBeVisible({ timeout: 15_000 });
 
-  // The mobile chart legend renders one chip per school inside the chart card.
+  // The mobile chart legend renders one chip per school in the active phase.
   const chipGroup = page.getByRole('group', { name: /highlight a school/i });
   const chips = chipGroup.getByRole('button');
-  await expect(chips).toHaveCount(2);
+  await expect(chips.first()).toBeVisible({ timeout: 15_000 });
+  expect(await chips.count()).toBeGreaterThanOrEqual(2);
 
   // Tapping a chip focuses that school's line; tapping again releases it.
   await chips.first().click();

nextjs-app/components/ComparisonChart.module.css

@@ -21,8 +21,10 @@
 
 @media (max-width: 640px) {
     .chips {
-        display: flex;
+        /* Two chips per row so long school names don't crowd into a single
-        flex-wrap: wrap;
+           line; each chip fills its column and truncates with an ellipsis. */
+        display: grid;
+        grid-template-columns: 1fr 1fr;
         gap: 6px;
         padding-bottom: 8px;
     }
@@ -31,8 +33,8 @@
         display: inline-flex;
         align-items: center;
         gap: 6px;
-        min-height: 44px;
+        min-height: 40px;
-        max-width: 100%;
+        min-width: 0;
         padding: 4px 10px;
         border: 1px solid rgba(0, 0, 0, .12);
         border-radius: 999px;
@@ -58,6 +60,8 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        max-width: 9rem;
+        /* min-width:0 lets the name shrink inside the grid cell so the
+           ellipsis kicks in instead of overflowing. */
+        min-width: 0;
     }
 }

nextjs-app/components/HomeView.module.css

@@ -369,6 +369,16 @@
 
   .viewToggle {
     justify-content: center;
+    flex-shrink: 0;
+  }
+
+  /* The sort <select> sizes to its widest option ("Highest Reading, Writing
+     & Maths %"), which overflows a phone viewport — beside the view toggle it
+     ran off the right edge. Let it flex into the remaining space and shrink;
+     the selected label truncates instead of pushing past the screen. */
+  .sortSelect {
+    flex: 1;
+    min-width: 0;
   }
 
   .mapViewContainer {