fix(detail): give Results Over Time chart more height on desktop #78

Merged
tudor merged 1 commits from fix/detail-trend-chart-taller into main 2026-07-21 21:08:34 +00:00
Owner

What

The Results Over Time trend chart was capped at 280px tall on desktop, squishing the lines together and making them hard to read. This raises the base .chartContainer height to 380px in both the primary (KS2) and secondary (KS4) detail views.

Why mobile is unaffected

In both CSS modules the 380px lives in the base .chartContainer rule, which the existing @media (max-width: 768px) query already overrides with height: auto. On mobile, PerformanceChart's own .chartWrapper carries the canvas height (220px at ≤640px) with the chip strip and mini-legend flowing around it — so the desktop bump doesn't touch the mobile layout.

Notes

  • Verified .chartContainer only ever wraps PerformanceChart in both views (not the hero map).
  • Pure CSS value change; no behaviour change, so no e2e/ journey updates needed.

🤖 Generated with Claude Code

https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB

## What The **Results Over Time** trend chart was capped at `280px` tall on desktop, squishing the lines together and making them hard to read. This raises the base `.chartContainer` height to `380px` in both the primary (KS2) and secondary (KS4) detail views. ## Why mobile is unaffected In both CSS modules the `380px` lives in the base `.chartContainer` rule, which the existing `@media (max-width: 768px)` query already overrides with `height: auto`. On mobile, `PerformanceChart`'s own `.chartWrapper` carries the canvas height (220px at ≤640px) with the chip strip and mini-legend flowing around it — so the desktop bump doesn't touch the mobile layout. ## Notes - Verified `.chartContainer` only ever wraps `PerformanceChart` in both views (not the hero map). - Pure CSS value change; no behaviour change, so no `e2e/` journey updates needed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
tudor added 1 commit 2026-07-21 21:05:27 +00:00
fix(detail): give Results Over Time chart more height on desktop
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m6s
PR Checks / Backend Smoke (pull_request) Successful in 7s
PR Checks / Build Backend (no push) (pull_request) Successful in 11s
PR Checks / Build Frontend (no push) (pull_request) Successful in 47s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 11s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 13s
32f8a02862
The trend chart was capped at 280px tall on desktop, squishing the
lines together and making them hard to read. Raise the base
.chartContainer height to 380px in both the primary and secondary
detail views.

Mobile is unaffected: the base value is already overridden to
height:auto by the existing max-width:768px query, where
PerformanceChart's own .chartWrapper carries the canvas height.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB

🤖 AI Code Review (Claude Code)

This PR only changes the height of .chartContainer from 280px to 380px in two CSS module files, adding an explanatory comment for the desktop-only change. Purely a cosmetic CSS tweak with no functional, security, or deploy risk.

No issues found.

## 🤖 AI Code Review (Claude Code) This PR only changes the height of `.chartContainer` from 280px to 380px in two CSS module files, adding an explanatory comment for the desktop-only change. Purely a cosmetic CSS tweak with no functional, security, or deploy risk. ✅ No issues found.
tudor merged commit d02a323cdc into main 2026-07-21 21:08:34 +00:00
Sign in to join this conversation.
No Reviewers
No labels
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: tudor/school_compare#78