The hand-rolled SVG sparkline used px font sizes inside a 520-wide viewBox that stretched to the full card width, so labels ballooned ~4x and collided — and with 10+ years of real data the per-point labels and year ticks overlapped badly, while the oversized chart stretched the "this year" view. Replace it with a Chart.js line chart (AdmissionsTrendChart) in a fixed 200px wrapper, matching PerformanceChart: responsive px fonts, auto-skipping x ticks, auto-scaled y-axis clamped to 0-100, emphasised latest point. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
11 lines
124 B
CSS
11 lines
124 B
CSS
.wrapper {
|
|
width: 100%;
|
|
height: 200px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.wrapper {
|
|
height: 180px;
|
|
}
|
|
}
|