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 <noreply@anthropic.com>

nextjs-app/components/ComparisonChart.module.css

@@ -21,8 +21,10 @@
 
 @media (max-width: 640px) {
     .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;
         padding-bottom: 8px;
     }
@@ -31,8 +33,8 @@
         display: inline-flex;
         align-items: center;
         gap: 6px;
-        min-height: 44px;
+        min-height: 40px;
-        max-width: 100%;
+        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;
     }
 }