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

feat(compare): lay mobile chart chips two per row
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 9m43s
Details
PR Checks / Backend Smoke (pull_request) Successful in 5s
Details
PR Checks / Build Backend (no push) (pull_request) Successful in 10s
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 1m50s
Details

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-07-06 12:17:41 +01:00
co-authored by Claude Fable 5
parent 5c39131b50
commit 6828f6cd44
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/components/ComparisonChart.module.css
+9 -5
View File
@@ -21,8 +21,10 @@
@media (max-width: 640px) { @media (max-width: 640px) {
.chips { .chips {
display: flex; /* Two chips per row so long school names don't crowd into a single
flex-wrap: wrap; line; each chip fills its column and truncates with an ellipsis. */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px; gap: 6px;
padding-bottom: 8px; padding-bottom: 8px;
} }
@@ -31,8 +33,8 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
min-height: 44px; min-height: 40px;
max-width: 100%; min-width: 0;
padding: 4px 10px; padding: 4px 10px;
border: 1px solid rgba(0, 0, 0, .12); border: 1px solid rgba(0, 0, 0, .12);
border-radius: 999px; border-radius: 999px;
@@ -58,6 +60,8 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; 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;
} }
} }