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.
This commit is contained in:
Andrew Charlwood
2026-02-07 00:25:08 +00:00
parent 4ec3e6b973
commit a4059b5829
3 changed files with 8 additions and 6 deletions
+5 -5
View File
@@ -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.
+2
View File
@@ -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;
+1 -1
View File
@@ -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"},
),
]),
])