tudor/school_compare
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

style(compare): enlarge the per-school name label in mobile section cards
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m4s
Details
PR Checks / Backend Smoke (pull_request) Successful in 7s
Details
PR Checks / Build Backend (no push) (pull_request) Successful in 11s
Details
PR Checks / Build Frontend (no push) (pull_request) Successful in 47s
Details
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
Details
PR Checks / AI Code Review (Claude) (pull_request) Successful in 14s
Details

Browse Source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
This commit is contained in:
Tudor
2026-07-18 15:06:18 +01:00
co-authored by Claude Fable 5
parent 6d3a203699
commit dc21e80a5e
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/components/compare/compareSections.module.css
+7 -4
View File
@@ -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;