fix(search): address review on the shared result rows

- 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>

nextjs-app/components/HomeView.module.css

@@ -638,15 +638,46 @@
 
 /* A row in the list beside the map: clicking it picks its pin. */
 .mapRow {
+  position: relative;
   cursor: pointer;
   border-radius: 10px;
 }
 
-.mapRowSelected > * {
+.mapRowSelected > :last-child {
   outline: 2px solid var(--brand);
   outline-offset: 1px;
 }
 
+/* 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;
+}
+
+.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: 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;
+}
+
 
 
 .sectionHeader {

nextjs-app/components/HomeView.tsx

@@ -834,6 +834,18 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
                       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>
                 ))}

nextjs-app/components/SchoolRow.module.css

@@ -223,12 +223,13 @@
 /*
  * 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 ~400px list beside the map on desktop. HomeView makes both lists a
- * `results` container; outside one, the row keeps its wide layout.
- * 600px of list is a 632px screen less the page's padding, so phones behave
- * as they did under the old max-width: 640px media query.
+ * 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: 600px) {
+@container results (max-width: 608px) {
   .row {
     flex-wrap: wrap;
     padding: 0.875rem;

nextjs-app/components/SecondarySchoolRow.module.css

@@ -235,12 +235,13 @@
 /*
  * 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 ~400px list beside the map on desktop. HomeView makes both lists a
- * `results` container; outside one, the row keeps its wide layout.
- * 600px of list is a 632px screen less the page's padding, so phones behave
- * as they did under the old max-width: 640px media query.
+ * 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: 600px) {
+@container results (max-width: 608px) {
   .row {
     flex-wrap: wrap;
     padding: 0.875rem;