From dc21e80a5e9eebd13aaab84735642eb77cef35e6 Mon Sep 17 00:00:00 2001 From: Tudor Date: Sat, 18 Jul 2026 15:06:18 +0100 Subject: [PATCH] style(compare): enlarge the per-school name label in mobile section cards MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The colour-coded school name that leads each row in a mobile measure card was 0.8rem — a touch small to scan which school a value belongs to. Bump to 0.9rem (with a matching 10px dot) so it's easier to read. Mobile only; desktop uses the column header and hides this label. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB --- .../components/compare/compareSections.module.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/nextjs-app/components/compare/compareSections.module.css b/nextjs-app/components/compare/compareSections.module.css index f152a52..f3c5131 100644 --- a/nextjs-app/components/compare/compareSections.module.css +++ b/nextjs-app/components/compare/compareSections.module.css @@ -72,15 +72,18 @@ align-items: center; gap: 0.4rem; flex-basis: 100%; - font-size: 0.8rem; + /* Slightly larger than the values below it so the school each row belongs + to is easy to read on mobile (hidden on desktop, where the column header + names the school). */ + font-size: 0.9rem; font-weight: 600; color: var(--sc, var(--text-secondary)); - margin-bottom: 0.15rem; + margin-bottom: 0.2rem; } .cellDot { - width: 9px; - height: 9px; + width: 10px; + height: 10px; border-radius: 50%; background: var(--dot, var(--text-muted)); flex: none;