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

Merge pull request 'feat(compare): lay mobile chart chips two per row' (#16) from feat/compare-chips-two-per-row into main
Deploy (staging -> E2E gate -> production) / Build Backend (FastAPI) (push) Successful in 12s
Details
Deploy (staging -> E2E gate -> production) / Build Frontend (Next.js) (push) Successful in 50s
Details
Deploy (staging -> E2E gate -> production) / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Details
Deploy (staging -> E2E gate -> production) / Deploy to Staging (push) Successful in 1s
Details
Deploy (staging -> E2E gate -> production) / E2E Journeys against Staging (push) Successful in 38s
Details
Deploy (staging -> E2E gate -> production) / Promote to Production (push) Successful in 9s
Details

Browse Source 
Reviewed-on: #16
This commit was merged in pull request #16.
This commit is contained in:
tudor
2026-07-06 12:16:26 +00:00
parent 331ae8d89f 6828f6cd44
commit 64121592fd
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;
} }
} }