From 3458195865716552d71e10502fb56ca3dd3c73e7 Mon Sep 17 00:00:00 2001 From: Tudor Sitaru Date: Wed, 8 Apr 2026 11:18:07 +0100 Subject: [PATCH] polish(school-detail): align hero chips to fixed width, free hero summary MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - heroChip: swap ``min-width: 180px; flex: 0 1 auto`` for ``flex: 0 0 240px`` so every chip in the strip is the same width regardless of content. Title gets nowrap + ellipsis as insurance against accidental overflow. - heroChipTitle / Sub / Detail: align line-heights (1.3 / 1.4 / 1.4) so an OEIF chip (title + sub) and a Report Card chip (title + sub + detail) sit on the same vertical rhythm. - heroSummary: drop the 64ch max-width — the sentence should read at the natural hero width. Co-Authored-By: Claude Opus 4.6 --- nextjs-app/components/SchoolDetailView.module.css | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css index aefeeaf..359084c 100644 --- a/nextjs-app/components/SchoolDetailView.module.css +++ b/nextjs-app/components/SchoolDetailView.module.css @@ -728,8 +728,7 @@ } .heroChip { - min-width: 180px; - flex: 0 1 auto; + flex: 0 0 240px; padding: 0.75rem 1rem; border-radius: 8px; border-left: 3px solid var(--border-color, #e5dfd5); @@ -743,19 +742,23 @@ .heroChipTitle { font-size: 0.9375rem; font-weight: 700; - line-height: 1.25; + line-height: 1.3; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .heroChipSub { font-size: 0.75rem; color: var(--text-secondary, #5c564d); - line-height: 1.35; + line-height: 1.4; } .heroChipDetail { font-size: 0.75rem; font-weight: 600; - margin-top: 0.15rem; + line-height: 1.4; + margin-top: 0.1rem; } /* Hero tone scheme — independent of the .ofstedGrade{N} / .rcGrade{N} badges @@ -844,7 +847,6 @@ font-style: italic; line-height: 1.5; color: var(--text-primary, #1a1612); - max-width: 64ch; } .heroDataNote {