The school list in the map view now shows the same information as the list view, with the same styling.
What changes
The map view's list used a separate cut-down card (CompactSchoolItem). It showed less than the list view: no phase, age range, denomination, trend arrow or local authority, and only one action. It also looked different. The map view now renders the list view's own SchoolRow / SecondarySchoolRow.
One renderRow in HomeView draws the list view, the map view's list and the phone's bottom sheet. The map view and the sheet also gain Remove from compare. CompactSchoolItem and its styles are deleted.
Clicking a row (outside its links and buttons) still selects that school's pin on the map, and the selected row is outlined. The map view's list widens to 360–460px for the taller rows.
Narrow layout: a container query instead of a media query
The rows switched to their stacked layout with @media (max-width: 640px), which never fires in a ~430px list on a desktop screen. That rule is now @container results (max-width: 600px). HomeView makes the list view, the map view's list and the bottom sheet results containers. A 600px list corresponds to a 632px screen minus the page's padding, so phones lay out as before. Only HomeView renders these rows, so nothing else depends on the old media query.
Also
The bottom sheet's close button was a 30px tap target, which I flagged on #159. It's now a 44px target with the same 30px circle (MOBILE.md), and the phone journey now checks it.
Tests
Unit: 514/514 pass, and next build succeeds with DATABASE_URL unset. A new test checks that the row beside the map has exactly the same text as the same school's row in list view. The selection and special-school tests now target the shared rows.
E2E:
Desktop: each row in the map view's list carries the View link and the Compare button.
Phones: the sheet's close button is in the 44px check.
Not verified
I haven't seen it rendered. The rows in the map view's list should look like the phone list's rows, at about 430px wide. Worth a look on staging at 1280 and 1440px.
The school list in the map view now shows the same information as the list view, with the same styling.
## What changes
- The map view's list used a separate cut-down card (`CompactSchoolItem`). It showed less than the list view: no phase, age range, denomination, trend arrow or local authority, and only one action. It also looked different. The map view now renders the list view's own `SchoolRow` / `SecondarySchoolRow`.
- One `renderRow` in HomeView draws the list view, the map view's list and the phone's bottom sheet. The map view and the sheet also gain **Remove from compare**. `CompactSchoolItem` and its styles are deleted.
- Clicking a row (outside its links and buttons) still selects that school's pin on the map, and the selected row is outlined. The map view's list widens to 360–460px for the taller rows.
## Narrow layout: a container query instead of a media query
The rows switched to their stacked layout with `@media (max-width: 640px)`, which never fires in a ~430px list on a desktop screen. That rule is now `@container results (max-width: 600px)`. HomeView makes the list view, the map view's list and the bottom sheet `results` containers. A 600px list corresponds to a 632px screen minus the page's padding, so phones lay out as before. Only HomeView renders these rows, so nothing else depends on the old media query.
## Also
The bottom sheet's close button was a 30px tap target, which I flagged on #159. It's now a 44px target with the same 30px circle (MOBILE.md), and the phone journey now checks it.
## Tests
- Unit: 514/514 pass, and `next build` succeeds with `DATABASE_URL` unset. A new test checks that the row beside the map has exactly the same text as the same school's row in list view. The selection and special-school tests now target the shared rows.
- E2E:
- Desktop: each row in the map view's list carries the View link and the Compare button.
- Phones: the sheet's close button is in the 44px check.
## Not verified
I haven't seen it rendered. The rows in the map view's list should look like the phone list's rows, at about 430px wide. Worth a look on staging at 1280 and 1440px.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
The list beside the map used its own cut-down card, so it showed less
than the list view (no phase, age range, denomination, trend, local
authority) and looked different. It now renders the list view's
SchoolRow / SecondarySchoolRow, through one renderRow shared by the list
view, the map pane and the phone's bottom sheet, which also gains
Remove from compare. CompactSchoolItem and its styles are gone.
The rows switched to their stacked layout on a max-width: 640px media
query, which never fires in a ~430px pane on a desktop screen. It is now
a container query on the list the row sits in (`results`, set on the
list view, the map pane and the bottom sheet). 600px of list is a 632px
screen less padding, so phones lay out as before.
Clicking a row, outside its links and buttons, still picks its pin, and
the selected row is outlined. The pane widens to 360–460px for the
taller rows.
The bottom sheet's close button was a 30px target; it is now 44px with
the same 30px circle (MOBILE.md), and the phone journey checks it.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This replaces the map view's separate CompactSchoolItem card with the list view's own SchoolRow and SecondarySchoolRow, through a shared renderRow helper. The rows' mobile layout now keys off a named results container query instead of a screen media query, and the phone sheet's close button gets a 44px tap target. I found no correctness, security or deploy problems, and the tests are updated to match.
🟡 Minor
nextjs-app/components/SchoolRow.module.css: Switching from @media (max-width: 640px) to @container results (max-width: 600px) changes behaviour in two cases. A screen of about 633–640px now gets the wide layout. Any SchoolRow rendered outside a results container silently loses its mobile layout. The comment documents this, but a quick check that no other page renders these rows would be worthwhile. The same applies to SecondarySchoolRow.module.css.
nextjs-app/components/HomeView.tsx: The clickable wrapper div for map-list rows has an onClick but no keyboard handler or role, so keyboard users cannot pick a pin from the list. The old card had the same gap, so this is carried over rather than new.
## 🤖 AI Code Review (Claude Code)
This replaces the map view's separate CompactSchoolItem card with the list view's own SchoolRow and SecondarySchoolRow, through a shared renderRow helper. The rows' mobile layout now keys off a named `results` container query instead of a screen media query, and the phone sheet's close button gets a 44px tap target. I found no correctness, security or deploy problems, and the tests are updated to match.
### 🟡 Minor
- **nextjs-app/components/SchoolRow.module.css**: Switching from `@media (max-width: 640px)` to `@container results (max-width: 600px)` changes behaviour in two cases. A screen of about 633–640px now gets the wide layout. Any SchoolRow rendered outside a `results` container silently loses its mobile layout. The comment documents this, but a quick check that no other page renders these rows would be worthwhile. The same applies to SecondarySchoolRow.module.css.
- **nextjs-app/components/HomeView.tsx**: The clickable wrapper div for map-list rows has an onClick but no keyboard handler or role, so keyboard users cannot pick a pin from the list. The old card had the same gap, so this is carried over rather than new.
- The rows' narrow layout now switches at a 608px list, not 600px. Below
769px the page pads 1rem each side, so a 640px screen gives a 608px
list: exactly the old max-width: 640px media query, where 600px left
633-640px screens on the wide layout.
- rowContainerGuard.test.ts fails if anything other than HomeView renders
SchoolRow or SecondarySchoolRow, or if one of HomeView's row lists loses
its `results` container. Outside one the rows silently keep their wide
layout on phones. (Checked: HomeView is the only importer today.)
- Picking a pin from the list beside the map now works from the keyboard:
each row carries a "Show <school> on the map" button, visually hidden
until focused, with aria-pressed for the selected school. The row itself
cannot be the button, since it holds links and buttons of its own.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Replaces the map view's separate CompactSchoolItem with the list view's own SchoolRow and SecondarySchoolRow, shared through a renderRow helper. The rows now switch to their narrow layout with a container query on a results container instead of a media query. It adds a keyboard-only 'Show … on the map' button, enlarges the close button's tap target, and adds a guard test for the container requirement. The change looks coherent and I found no correctness, security or deploy problems.
✅ No issues found.
## 🤖 AI Code Review (Claude Code)
Replaces the map view's separate CompactSchoolItem with the list view's own SchoolRow and SecondarySchoolRow, shared through a renderRow helper. The rows now switch to their narrow layout with a container query on a `results` container instead of a media query. It adds a keyboard-only 'Show … on the map' button, enlarges the close button's tap target, and adds a guard test for the container requirement. The change looks coherent and I found no correctness, security or deploy problems.
✅ No issues found.
tudor
merged commit ebf9c12446 into main2026-10-01 09:04:31 +00:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
The school list in the map view now shows the same information as the list view, with the same styling.
What changes
CompactSchoolItem). It showed less than the list view: no phase, age range, denomination, trend arrow or local authority, and only one action. It also looked different. The map view now renders the list view's ownSchoolRow/SecondarySchoolRow.renderRowin HomeView draws the list view, the map view's list and the phone's bottom sheet. The map view and the sheet also gain Remove from compare.CompactSchoolItemand its styles are deleted.Narrow layout: a container query instead of a media query
The rows switched to their stacked layout with
@media (max-width: 640px), which never fires in a ~430px list on a desktop screen. That rule is now@container results (max-width: 600px). HomeView makes the list view, the map view's list and the bottom sheetresultscontainers. A 600px list corresponds to a 632px screen minus the page's padding, so phones lay out as before. Only HomeView renders these rows, so nothing else depends on the old media query.Also
The bottom sheet's close button was a 30px tap target, which I flagged on #159. It's now a 44px target with the same 30px circle (MOBILE.md), and the phone journey now checks it.
Tests
next buildsucceeds withDATABASE_URLunset. A new test checks that the row beside the map has exactly the same text as the same school's row in list view. The selection and special-school tests now target the shared rows.Not verified
I haven't seen it rendered. The rows in the map view's list should look like the phone list's rows, at about 430px wide. Worth a look on staging at 1280 and 1440px.
🤖 Generated with Claude Code
🤖 AI Code Review (Claude Code)
This replaces the map view's separate CompactSchoolItem card with the list view's own SchoolRow and SecondarySchoolRow, through a shared renderRow helper. The rows' mobile layout now keys off a named
resultscontainer query instead of a screen media query, and the phone sheet's close button gets a 44px tap target. I found no correctness, security or deploy problems, and the tests are updated to match.🟡 Minor
@media (max-width: 640px)to@container results (max-width: 600px)changes behaviour in two cases. A screen of about 633–640px now gets the wide layout. Any SchoolRow rendered outside aresultscontainer silently loses its mobile layout. The comment documents this, but a quick check that no other page renders these rows would be worthwhile. The same applies to SecondarySchoolRow.module.css.🤖 AI Code Review (Claude Code)
Replaces the map view's separate CompactSchoolItem with the list view's own SchoolRow and SecondarySchoolRow, shared through a renderRow helper. The rows now switch to their narrow layout with a container query on a
resultscontainer instead of a media query. It adds a keyboard-only 'Show … on the map' button, enlarges the close button's tap target, and adds a guard test for the container requirement. The change looks coherent and I found no correctness, security or deploy problems.✅ No issues found.