feat(ui): replace card grid with row-based results and plain-language metric labels

Replace the school card grid with a scannable row list that shows 3x more
results per screen. Each row shows: school name + R,W&M % with trend,
area/type meta, and reading/writing/maths progress scores with plain-English
band labels (e.g. "above average") instead of raw numbers.

Add lib/metrics.ts as a single source of truth for plain-language metric
explanations and the progressBand() helper. Map view toggle is unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

nextjs-app/components/HomeView.module.css

@@ -311,64 +311,24 @@
   line-height: 1.5;
 }
 
-.resultsHeader {
+.schoolList {
-  margin-bottom: 1rem;
-  padding-bottom: 0.625rem;
-  border-bottom: 2px solid var(--border-color, #e5dfd5);
-}
-
-.resultsHeader h2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--text-primary, #1a1612);
-  margin: 0;
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  gap: 0.375rem;
+  gap: 0.5rem;
-}
-
-.resultsHeader h2::before {
-  content: '';
-  display: inline-block;
-  width: 3px;
-  height: 1.125em;
-  background: var(--accent-coral, #e07256);
-  border-radius: 2px;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1rem;
   margin-bottom: 1.25rem;
 }
 
-/* Staggered grid entry animation */
+/* Staggered fade-in for rows */
-.grid > * {
+.schoolList > *:nth-child(1) { animation-delay: 0ms; }
-  animation: gridItemFadeIn 0.4s ease-out both;
+.schoolList > *:nth-child(2) { animation-delay: 30ms; }
-}
+.schoolList > *:nth-child(3) { animation-delay: 60ms; }
-
+.schoolList > *:nth-child(4) { animation-delay: 90ms; }
-.grid > *:nth-child(1) { animation-delay: 0ms; }
+.schoolList > *:nth-child(5) { animation-delay: 120ms; }
-.grid > *:nth-child(2) { animation-delay: 50ms; }
+.schoolList > *:nth-child(6) { animation-delay: 150ms; }
-.grid > *:nth-child(3) { animation-delay: 100ms; }
+.schoolList > *:nth-child(7) { animation-delay: 180ms; }
-.grid > *:nth-child(4) { animation-delay: 150ms; }
+.schoolList > *:nth-child(8) { animation-delay: 210ms; }
-.grid > *:nth-child(5) { animation-delay: 200ms; }
+.schoolList > *:nth-child(9) { animation-delay: 240ms; }
-.grid > *:nth-child(6) { animation-delay: 250ms; }
+.schoolList > *:nth-child(n+10) { animation-delay: 270ms; }
-.grid > *:nth-child(7) { animation-delay: 300ms; }
-.grid > *:nth-child(8) { animation-delay: 350ms; }
-.grid > *:nth-child(9) { animation-delay: 400ms; }
-.grid > *:nth-child(n+10) { animation-delay: 450ms; }
-
-@keyframes gridItemFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 
 .emptyState {
   text-align: center;
@@ -394,11 +354,6 @@
 }
 
 @media (max-width: 768px) {
-  .grid {
-    grid-template-columns: 1fr;
-    gap: 0.75rem;
-  }
-
   .locationBannerWrapper {
     flex-direction: column;
     align-items: stretch;

nextjs-app/components/HomeView.tsx

@@ -8,7 +8,7 @@
 import { useState, useEffect } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { FilterBar } from './FilterBar';
-import { SchoolCard } from './SchoolCard';
+import { SchoolRow } from './SchoolRow';
 import { SchoolMap } from './SchoolMap';
 import { Pagination } from './Pagination';
 import { EmptyState } from './EmptyState';
@@ -134,8 +134,8 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
             </h2>
             <select value={sortOrder} onChange={e => setSortOrder(e.target.value)} className={styles.sortSelect}>
               <option value="default">Sort: Relevance</option>
-              <option value="rwm_desc">Highest RWM%</option>
+              <option value="rwm_desc">Highest R, W &amp; M %</option>
-              <option value="rwm_asc">Lowest RWM%</option>
+              <option value="rwm_asc">Lowest R, W &amp; M %</option>
               {isLocationSearch && <option value="distance">Nearest first</option>}
               <option value="name_asc">Name A–Z</option>
             </select>
@@ -204,11 +204,12 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
         ) : (
           /* List View Layout */
           <>
-            <div className={styles.grid}>
+            <div className={styles.schoolList}>
               {sortedSchools.map((school) => (
-                <SchoolCard
+                <SchoolRow
                   key={school.urn}
                   school={school}
+                  isLocationSearch={isLocationSearch}
                   onAddToCompare={addSchool}
                   onRemoveFromCompare={removeSchool}
                   isInCompare={selectedSchools.some(s => s.urn === school.urn)}

nextjs-app/components/SchoolRow.module.css

@@ -0,0 +1,264 @@
+.row {
+  display: flex;
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-left: 3px solid transparent;
+  border-radius: 8px;
+  padding: 0.875rem 1rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  animation: rowFadeIn 0.3s ease-out both;
+}
+
+.row:hover {
+  border-left-color: var(--accent-coral, #e07256);
+  box-shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
+}
+
+.rowInCompare {
+  border-left-color: var(--accent-teal, #2d7d7d);
+  background: var(--bg-secondary, #f3ede4);
+}
+
+@keyframes rowFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.rowMain {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+/* Line 1 */
+.rowTop {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.schoolName {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1612);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.schoolName:hover {
+  color: var(--accent-coral, #e07256);
+}
+
+/* Score block: number + trend + label stacked */
+.scoreBlock {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  flex-shrink: 0;
+  gap: 0;
+  min-width: 60px;
+  text-align: right;
+}
+
+.scoreValue {
+  font-size: 1.0625rem;
+  font-weight: 700;
+  color: var(--text-primary, #1a1612);
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  line-height: 1.2;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.scoreNA {
+  font-size: 1rem;
+  color: var(--text-muted, #8a847a);
+}
+
+.scoreLabel {
+  font-size: 0.6875rem;
+  color: var(--text-muted, #8a847a);
+  white-space: nowrap;
+}
+
+/* Trend arrow */
+.trend {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 2px;
+}
+
+.trendUp {
+  color: var(--accent-teal, #2d7d7d);
+}
+
+.trendDown {
+  color: var(--accent-coral, #e07256);
+}
+
+.trendStable {
+  color: var(--text-muted, #8a847a);
+}
+
+/* Action buttons */
+.rowActions {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+}
+
+.btnView {
+  padding: 0.3125rem 0.625rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-secondary, #5c564d);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 5px;
+  text-decoration: none;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.btnView:hover {
+  background: var(--bg-secondary, #f3ede4);
+  color: var(--text-primary, #1a1612);
+  border-color: var(--text-muted, #8a847a);
+}
+
+.btnCompare {
+  padding: 0.3125rem 0.625rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: white;
+  background: var(--accent-coral, #e07256);
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  white-space: nowrap;
+}
+
+.btnCompare:hover {
+  background: var(--accent-coral-dark, #c45a3f);
+}
+
+.btnRemove {
+  padding: 0.3125rem 0.625rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-secondary, #5c564d);
+  background: var(--bg-secondary, #f3ede4);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.btnRemove:hover {
+  background: var(--border-color, #e5dfd5);
+  color: var(--text-primary, #1a1612);
+}
+
+/* Line 2: Meta tags */
+.rowMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0;
+  font-size: 0.8rem;
+  color: var(--text-muted, #8a847a);
+}
+
+.rowMeta span:not(:last-child)::after {
+  content: '·';
+  margin: 0 0.4rem;
+  color: var(--border-color, #e5dfd5);
+}
+
+.distanceBadge {
+  display: inline-block;
+  padding: 0.0625rem 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: var(--accent-teal, #2d7d7d);
+  color: white;
+  border-radius: 3px;
+  margin-left: 0.25rem;
+}
+
+/* Line 3: Progress scores */
+.rowProgress {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+  margin-top: 0.125rem;
+}
+
+.progressItem {
+  font-size: 0.8rem;
+  color: var(--text-secondary, #5c564d);
+}
+
+.progressValue {
+  color: var(--text-primary, #1a1612);
+  margin: 0 0.25rem;
+}
+
+.progressBand {
+  font-style: normal;
+  font-size: 0.75rem;
+  color: var(--text-muted, #8a847a);
+}
+
+/* Mobile */
+@media (max-width: 640px) {
+  .row {
+    padding: 0.75rem;
+    border-radius: 6px;
+  }
+
+  .rowTop {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .schoolName {
+    flex-basis: 100%;
+    white-space: normal;
+    font-size: 0.9375rem;
+  }
+
+  .scoreBlock {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.375rem;
+    flex-basis: auto;
+  }
+
+  .scoreLabel {
+    display: none;
+  }
+
+  .rowActions {
+    margin-left: auto;
+  }
+
+  .rowProgress {
+    gap: 0.375rem 0.75rem;
+  }
+}

nextjs-app/components/SchoolRow.tsx

@@ -0,0 +1,157 @@
+/**
+ * SchoolRow Component
+ * Compact row-based school display for search results list view
+ */
+
+import type { School } from '@/lib/types';
+import { formatPercentage, formatProgress, calculateTrend } from '@/lib/utils';
+import { progressBand } from '@/lib/metrics';
+import styles from './SchoolRow.module.css';
+
+interface SchoolRowProps {
+  school: School;
+  isLocationSearch?: boolean;
+  isInCompare?: boolean;
+  onAddToCompare?: (school: School) => void;
+  onRemoveFromCompare?: (urn: number) => void;
+}
+
+export function SchoolRow({
+  school,
+  isLocationSearch,
+  isInCompare = false,
+  onAddToCompare,
+  onRemoveFromCompare,
+}: SchoolRowProps) {
+  const trend = calculateTrend(school.rwm_expected_pct, school.prev_rwm_expected_pct);
+
+  const hasProgress =
+    school.reading_progress != null ||
+    school.writing_progress != null ||
+    school.maths_progress != null;
+
+  const handleCompareClick = () => {
+    if (isInCompare) {
+      onRemoveFromCompare?.(school.urn);
+    } else {
+      onAddToCompare?.(school);
+    }
+  };
+
+  return (
+    <div className={`${styles.row} ${isInCompare ? styles.rowInCompare : ''}`}>
+      <div className={styles.rowMain}>
+        {/* Line 1: Name + score + actions */}
+        <div className={styles.rowTop}>
+          <a href={`/school/${school.urn}`} className={styles.schoolName}>
+            {school.school_name}
+          </a>
+
+          <div className={styles.scoreBlock}>
+            {school.rwm_expected_pct != null ? (
+              <>
+                <strong className={styles.scoreValue}>
+                  {formatPercentage(school.rwm_expected_pct, 0)}
+                </strong>
+                {school.prev_rwm_expected_pct != null && (
+                  <span
+                    className={`${styles.trend} ${styles[`trend${trend.charAt(0).toUpperCase() + trend.slice(1)}`]}`}
+                    title={`Previous year: ${formatPercentage(school.prev_rwm_expected_pct)}`}
+                  >
+                    {trend === 'up' && (
+                      <svg viewBox="0 0 16 16" fill="none" width="10" height="10">
+                        <path d="M8 3L14 10H2L8 3Z" fill="currentColor" />
+                      </svg>
+                    )}
+                    {trend === 'down' && (
+                      <svg viewBox="0 0 16 16" fill="none" width="10" height="10">
+                        <path d="M8 13L2 6H14L8 13Z" fill="currentColor" />
+                      </svg>
+                    )}
+                    {trend === 'stable' && (
+                      <svg viewBox="0 0 16 16" fill="none" width="10" height="10">
+                        <rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor" />
+                      </svg>
+                    )}
+                  </span>
+                )}
+              </>
+            ) : (
+              <span className={styles.scoreNA}>—</span>
+            )}
+            <span className={styles.scoreLabel}>R, W &amp; M</span>
+          </div>
+
+          <div className={styles.rowActions}>
+            <a href={`/school/${school.urn}`} className={styles.btnView}>
+              View
+            </a>
+            {(onAddToCompare || onRemoveFromCompare) && (
+              <button
+                onClick={handleCompareClick}
+                className={isInCompare ? styles.btnRemove : styles.btnCompare}
+              >
+                {isInCompare ? '✓ Remove' : '+ Add'}
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Line 2: Meta tags */}
+        <div className={styles.rowMeta}>
+          {school.local_authority && <span>{school.local_authority}</span>}
+          {school.school_type && <span>{school.school_type}</span>}
+          {!isLocationSearch &&
+            school.religious_denomination &&
+            school.religious_denomination !== 'Does not apply' && (
+              <span>{school.religious_denomination}</span>
+            )}
+          {isLocationSearch && school.distance != null && (
+            <span className={styles.distanceBadge}>
+              {(school.distance / 1609.34).toFixed(1)} mi
+            </span>
+          )}
+        </div>
+
+        {/* Line 3: Progress scores with plain-language bands */}
+        {hasProgress && (
+          <div className={styles.rowProgress}>
+            {school.reading_progress != null && (
+              <span className={styles.progressItem}>
+                Reading{' '}
+                <strong className={styles.progressValue}>
+                  {formatProgress(school.reading_progress)}
+                </strong>
+                <em className={styles.progressBand}>
+                  {progressBand(school.reading_progress)}
+                </em>
+              </span>
+            )}
+            {school.writing_progress != null && (
+              <span className={styles.progressItem}>
+                Writing{' '}
+                <strong className={styles.progressValue}>
+                  {formatProgress(school.writing_progress)}
+                </strong>
+                <em className={styles.progressBand}>
+                  {progressBand(school.writing_progress)}
+                </em>
+              </span>
+            )}
+            {school.maths_progress != null && (
+              <span className={styles.progressItem}>
+                Maths{' '}
+                <strong className={styles.progressValue}>
+                  {formatProgress(school.maths_progress)}
+                </strong>
+                <em className={styles.progressBand}>
+                  {progressBand(school.maths_progress)}
+                </em>
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

nextjs-app/lib/metrics.ts

@@ -0,0 +1,113 @@
+/**
+ * Plain-language metric labels and explanations.
+ * Single source of truth for all metric display strings.
+ */
+
+export interface MetricExplanation {
+  label: string;
+  plain: string;
+  detail?: string;
+}
+
+export const METRIC_EXPLANATIONS: Record<string, MetricExplanation> = {
+  rwm_expected_pct: {
+    label: 'Reading, Writing & Maths',
+    plain: '% of pupils achieving the expected standard in all three subjects at age 11',
+    detail: 'The national average is around 60%. Higher means more pupils reached the expected level.',
+  },
+  rwm_high_pct: {
+    label: 'Higher Standard — Reading, Writing & Maths',
+    plain: '% of pupils exceeding the expected level in all three subjects',
+    detail: 'A more demanding threshold. The national average is around 8%.',
+  },
+  reading_expected_pct: {
+    label: 'Reading — Expected Standard',
+    plain: '% of pupils achieving the expected standard in reading at age 11',
+  },
+  writing_expected_pct: {
+    label: 'Writing — Expected Standard',
+    plain: '% of pupils achieving the expected standard in writing at age 11',
+  },
+  maths_expected_pct: {
+    label: 'Maths — Expected Standard',
+    plain: '% of pupils achieving the expected standard in maths at age 11',
+  },
+  reading_high_pct: {
+    label: 'Reading — Higher Standard',
+    plain: '% of pupils exceeding the expected level in reading',
+  },
+  writing_high_pct: {
+    label: 'Writing — Higher Standard',
+    plain: '% of pupils exceeding the expected level in writing',
+  },
+  maths_high_pct: {
+    label: 'Maths — Higher Standard',
+    plain: '% of pupils exceeding the expected level in maths',
+  },
+  gps_expected_pct: {
+    label: 'Grammar & Spelling',
+    plain: '% of pupils achieving the expected standard in grammar, punctuation & spelling',
+  },
+  science_expected_pct: {
+    label: 'Science',
+    plain: '% of pupils achieving the expected standard in science',
+  },
+  reading_progress: {
+    label: 'Reading Progress',
+    plain: 'How much pupils improved in reading compared to similar schools',
+    detail: '0 = national average. Positive means better-than-average progress from Year 2 to Year 6.',
+  },
+  writing_progress: {
+    label: 'Writing Progress',
+    plain: 'How much pupils improved in writing compared to similar schools',
+    detail: '0 = national average. Positive means better-than-average progress from Year 2 to Year 6.',
+  },
+  maths_progress: {
+    label: 'Maths Progress',
+    plain: 'How much pupils improved in maths compared to similar schools',
+    detail: '0 = national average. Positive means better-than-average progress from Year 2 to Year 6.',
+  },
+  reading_avg_score: {
+    label: 'Reading Average Score',
+    plain: 'Average scaled score in the reading test (range 80–120, average = 100)',
+  },
+  maths_avg_score: {
+    label: 'Maths Average Score',
+    plain: 'Average scaled score in the maths test (range 80–120, average = 100)',
+  },
+  gps_avg_score: {
+    label: 'Grammar & Spelling Average Score',
+    plain: 'Average scaled score in the grammar, punctuation & spelling test',
+  },
+  overall_absence_pct: {
+    label: 'Absence Rate',
+    plain: '% of school sessions missed due to any reason',
+    detail: 'Lower is better. The national average is around 5%.',
+  },
+  persistent_absence_pct: {
+    label: 'Persistent Absence',
+    plain: '% of pupils missing 10% or more of school sessions',
+    detail: 'Lower is better. Persistent absence can significantly affect attainment.',
+  },
+  rwm_expected_disadvantaged_pct: {
+    label: 'Disadvantaged Pupils — Reading, Writing & Maths',
+    plain: '% of disadvantaged pupils achieving the expected standard in all three subjects',
+  },
+  disadvantaged_gap: {
+    label: 'Disadvantaged Gap',
+    plain: 'Difference in attainment between disadvantaged pupils and their peers',
+    detail: 'A smaller gap means the school is doing more to support disadvantaged pupils.',
+  },
+};
+
+/**
+ * Returns a plain-English band label for a KS2 progress score.
+ * Progress scores are centred at 0 (= national average).
+ */
+export function progressBand(score: number): string {
+  if (score > 3) return 'well above average';
+  if (score > 1) return 'above average';
+  if (score >= -1) return 'around average';
+  if (score >= -3) return 'below average';
+  return 'well below average';
+}