Set explicit height:2rem, line-height:1, font-family:inherit on all children
of button group containers. Browsers apply different default line-height and
font-family to <button> vs <a>, causing height differences that persist even
with identical padding and display:inline-flex.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
<a> tags are display:inline by default and don't respect vertical padding,
while <button> is inline-block. Mixed anchor/button pairs (View/Add) rendered
at different heights despite identical padding. Apply display:inline-flex +
align-items:center to every button-styled element across SchoolRow, RankingsView,
and SchoolCard. Add border:1px solid transparent to borderless buttons so total
box size matches bordered siblings.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Group school name and score together on the left using a nameScore flex
container, so the percentage sits close to the name rather than pushed to the
far right. Action buttons get slightly more padding on desktop (0.4375rem v
0.3125rem). On mobile the scoreLabel is now visible inline instead of hidden,
so the percentage reads as R,W&M not a bare number.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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>
