From 6828f6cd4417284ea3eb6f088fa20945b8b40ed3 Mon Sep 17 00:00:00 2001 From: Tudor Date: Mon, 6 Jul 2026 12:17:41 +0100 Subject: [PATCH] feat(compare): lay mobile chart chips two per row The mobile chart legend stacked one school chip per line, so up to five schools pushed the chart down and left the plot cramped. Switch the chip row to a two-column grid; each chip fills its column and truncates its name with an ellipsis (full names remain on the school cards and in the tooltip). Five schools now take three rows instead of five, giving the chart noticeably more height. Co-Authored-By: Claude Fable 5 --- nextjs-app/components/ComparisonChart.module.css | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/nextjs-app/components/ComparisonChart.module.css b/nextjs-app/components/ComparisonChart.module.css index b4df055..dbd82c6 100644 --- a/nextjs-app/components/ComparisonChart.module.css +++ b/nextjs-app/components/ComparisonChart.module.css @@ -21,8 +21,10 @@ @media (max-width: 640px) { .chips { - display: flex; - flex-wrap: wrap; + /* Two chips per row so long school names don't crowd into a single + line; each chip fills its column and truncates with an ellipsis. */ + display: grid; + grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 8px; } @@ -31,8 +33,8 @@ display: inline-flex; align-items: center; gap: 6px; - min-height: 44px; - max-width: 100%; + min-height: 40px; + min-width: 0; padding: 4px 10px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 999px; @@ -58,6 +60,8 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - max-width: 9rem; + /* min-width:0 lets the name shrink inside the grid cell so the + ellipsis kicks in instead of overflowing. */ + min-width: 0; } }