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 #16

Merged
tudor merged 1 commits from feat/compare-chips-two-per-row into main 2026-07-06 12:16:27 +00:00
Conversation 1 Commits 1 Files Changed 1
+9 -5
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;
} }
} }