From a4059b5829fe8ab07fce3f0a523f81771b4848a4 Mon Sep 17 00:00:00 2001 From: Andrew Charlwood Date: Sat, 7 Feb 2026 00:25:08 +0000 Subject: [PATCH] style: increase Trust Comparison chart height from 320px to 500px (Task 11.2) Charts were overspilling 320px containers. Increased to 500px for readability. Added overflow: hidden + min-height: 0 to .tc-chart-cell to prevent any content leaking. Dashboard scrolls vertically, which is acceptable for 6 readable charts. --- IMPLEMENTATION_PLAN.md | 10 +++++----- dash_app/assets/nhs.css | 2 ++ dash_app/components/trust_comparison.py | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/IMPLEMENTATION_PLAN.md b/IMPLEMENTATION_PLAN.md index e7146b0..e3f8647 100644 --- a/IMPLEMENTATION_PLAN.md +++ b/IMPLEMENTATION_PLAN.md @@ -638,11 +638,11 @@ User feedback after Phase 10 completion. Four layout/aesthetics issues on both P - **Checkpoint**: Clear All button is next to the filter buttons on the left ✓ ### 11.2 Trust Comparison charts — fix overspill and increase chart size -- [ ] In `dash_app/components/trust_comparison.py`, increase the `dcc.Graph` height from `320px` to a larger value (e.g., `450px` or use `calc()` / viewport units). Charts are currently too cramped and overspilling their containers. -- [ ] In `dash_app/assets/nhs.css`, review `.tc-dashboard__grid` and `.tc-chart-cell` — ensure charts don't overflow. Consider whether the 2×3 grid should scroll vertically rather than cramming all 6 charts into the viewport. Each chart should be comfortably readable. -- [ ] The user explicitly wants BIGGER charts, not smaller. Prioritize readability over fitting everything in the viewport. -- [ ] Verify: Trust Comparison dashboard charts are large enough to read, no text/axis overspill, scrolling is acceptable if needed -- **Checkpoint**: All 6 Trust Comparison charts render at a readable size without overspill +- [x] In `dash_app/components/trust_comparison.py`, increase the `dcc.Graph` height from `320px` to a larger value (e.g., `450px` or use `calc()` / viewport units). Charts are currently too cramped and overspilling their containers. +- [x] In `dash_app/assets/nhs.css`, review `.tc-dashboard__grid` and `.tc-chart-cell` — ensure charts don't overflow. Consider whether the 2×3 grid should scroll vertically rather than cramming all 6 charts into the viewport. Each chart should be comfortably readable. +- [x] The user explicitly wants BIGGER charts, not smaller. Prioritize readability over fitting everything in the viewport. +- [x] Verify: Trust Comparison dashboard charts are large enough to read, no text/axis overspill, scrolling is acceptable if needed +- **Checkpoint**: All 6 Trust Comparison charts render at a readable size without overspill ✓ ### 11.3 Patient Pathways chart — fill available screen height - [ ] In `dash_app/components/chart_card.py`, update the `dcc.Graph` style to fill all available vertical space below the tab bar / chart header. Use CSS `calc(100vh - ...)` or `flex: 1` patterns to make the chart stretch to the bottom of the viewport. diff --git a/dash_app/assets/nhs.css b/dash_app/assets/nhs.css index 20cb350..1db57dd 100644 --- a/dash_app/assets/nhs.css +++ b/dash_app/assets/nhs.css @@ -467,6 +467,8 @@ body { border: 1px solid var(--nhs-pale-grey); display: flex; flex-direction: column; + overflow: hidden; + min-height: 0; } .tc-chart-cell__title { padding: 10px 16px; diff --git a/dash_app/components/trust_comparison.py b/dash_app/components/trust_comparison.py index da27f96..ea5129e 100644 --- a/dash_app/components/trust_comparison.py +++ b/dash_app/components/trust_comparison.py @@ -10,7 +10,7 @@ def _tc_chart_cell(title, graph_id): dcc.Graph( id=graph_id, config={"displayModeBar": False, "displaylogo": False}, - style={"height": "320px"}, + style={"height": "500px"}, ), ]), ])