On mobile the chart legend stacked one school chip per line, so up to five schools pushed the chart down and cramped the plot. This lays the chips out two per row (CSS grid); each chip fills its column and truncates its name with an ellipsis — the full names stay on the school cards above and in the chart tooltip.
Previewed live at 390px with five long-named schools: the legend drops from five rows to three, and the chart gains noticeable height. Typecheck + 33 unit tests pass.
On mobile the chart legend stacked one school chip per line, so up to five schools pushed the chart down and cramped the plot. This lays the chips out **two per row** (CSS grid); each chip fills its column and truncates its name with an ellipsis — the full names stay on the school cards above and in the chart tooltip.
Previewed live at 390px with five long-named schools: the legend drops from five rows to three, and the chart gains noticeable height. Typecheck + 33 unit tests pass.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
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 is a mobile-only CSS change to ComparisonChart.module.css that switches the school-highlight chip legend from a wrapping flex layout to a fixed two-column CSS grid, adding min-width:0 on the chip and its label so long school names truncate with an ellipsis instead of overflowing. The logic is sound (grid/flex shrink-to-fit is correctly enabled), it's a low-risk, presentation-only change with no backend, deploy, or data implications.
🟡 Minor
nextjs-app/components/ComparisonChart.module.css: Chip min-height was reduced from 44px to 40px, shrinking the mobile tap target below the commonly recommended 44x44px minimum touch target size.
nextjs-app/components/ComparisonChart.module.css: With an odd number of compared schools (e.g. 3 or the max of 5), the grid's last row leaves a single chip in the left column with empty space in the right column rather than the chip spanning full width.
## 🤖 AI Code Review (Claude Code)
This is a mobile-only CSS change to ComparisonChart.module.css that switches the school-highlight chip legend from a wrapping flex layout to a fixed two-column CSS grid, adding min-width:0 on the chip and its label so long school names truncate with an ellipsis instead of overflowing. The logic is sound (grid/flex shrink-to-fit is correctly enabled), it's a low-risk, presentation-only change with no backend, deploy, or data implications.
### 🟡 Minor
- **nextjs-app/components/ComparisonChart.module.css**: Chip min-height was reduced from 44px to 40px, shrinking the mobile tap target below the commonly recommended 44x44px minimum touch target size.
- **nextjs-app/components/ComparisonChart.module.css**: With an odd number of compared schools (e.g. 3 or the max of 5), the grid's last row leaves a single chip in the left column with empty space in the right column rather than the chip spanning full width.
tudor
merged commit 64121592fd into main2026-07-06 12:16:27 +00:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
On mobile the chart legend stacked one school chip per line, so up to five schools pushed the chart down and cramped the plot. This lays the chips out two per row (CSS grid); each chip fills its column and truncates its name with an ellipsis — the full names stay on the school cards above and in the chart tooltip.
Previewed live at 390px with five long-named schools: the legend drops from five rows to three, and the chart gains noticeable height. Typecheck + 33 unit tests pass.
🤖 Generated with Claude Code
🤖 AI Code Review (Claude Code)
This is a mobile-only CSS change to ComparisonChart.module.css that switches the school-highlight chip legend from a wrapping flex layout to a fixed two-column CSS grid, adding min-width:0 on the chip and its label so long school names truncate with an ellipsis instead of overflowing. The logic is sound (grid/flex shrink-to-fit is correctly enabled), it's a low-risk, presentation-only change with no backend, deploy, or data implications.
🟡 Minor