TudorandClaude Fable 5
6828f6cd44
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 9m43s
PR Checks / Backend Smoke (pull_request) Successful in 5s
PR Checks / Build Backend (no push) (pull_request) Successful in 10s
PR Checks / Build Frontend (no push) (pull_request) Successful in 47s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 1m50s
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>
68 lines
1.6 KiB
CSS
68 lines
1.6 KiB
CSS
/* Chart wrapper: chips (mobile) above, canvas filling the rest of the
|
|
parent .chartContainer, whose fixed height drives Chart.js sizing via
|
|
maintainAspectRatio: false. */
|
|
.wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.canvasBox {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* School chips: mobile-only legend + tap-to-focus control. Desktop keeps
|
|
Chart.js's built-in legend (with per-school point shapes). */
|
|
.chips {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.chips {
|
|
/* Two chips per row so long school names don't crowd into a single
|
|
line; each chip fills its column and truncates with an ellipsis. */
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 6px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-height: 40px;
|
|
min-width: 0;
|
|
padding: 4px 10px;
|
|
border: 1px solid rgba(0, 0, 0, .12);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.chip[aria-pressed="true"] {
|
|
background: rgba(0, 0, 0, .06);
|
|
border-color: rgba(0, 0, 0, .35);
|
|
}
|
|
|
|
.chipDot {
|
|
flex: 0 0 auto;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.chipName {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
/* min-width:0 lets the name shrink inside the grid cell so the
|
|
ellipsis kicks in instead of overflowing. */
|
|
min-width: 0;
|
|
}
|
|
}
|