admin/HighCostDrugsDemo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: make Patient Pathways chart fill available viewport height (Task 11.3)

Browse Source 
- Changed .main from min-height to height with overflow-y auto
- Added flex chain: #view-container → #patient-pathways-view → .chart-card
  → dcc.Loading wrapper → #chart-container → #pathway-chart
- All flex parents get min-height: 0 for proper flex shrinking
- dcc.Graph set to responsive=True with flex: 1 and minHeight: 0
- Trust Comparison view scrolls naturally via .main overflow-y auto
This commit is contained in:
Andrew Charlwood
2026-02-07 00:31:47 +00:00
parent ab62acf41d
commit 10d47d616c
3 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
IMPLEMENTATION_PLAN.md
+5 -5
View File
@@ -645,11 +645,11 @@ User feedback after Phase 10 completion. Four layout/aesthetics issues on both P
- **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.
- [ ] In `dash_app/assets/nhs.css`, ensure `.chart-card` and its children use flex layout to fill remaining height. The `.main` container already has `min-height: calc(100vh - var(--header-total-h))` — the chart card should consume all of that minus the filter bar height.
- [ ] The Patient Pathways view (`#patient-pathways-view`) should also be a flex column that fills height, so the chart card can stretch.
- [ ] Verify: Icicle/Sankey charts fill the available viewport height, not just a fixed 500px minimum
- **Checkpoint**: Patient Pathways chart uses all available vertical space below the filter bar
- [x] 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.
- [x] In `dash_app/assets/nhs.css`, ensure `.chart-card` and its children use flex layout to fill remaining height. The `.main` container already has `min-height: calc(100vh - var(--header-total-h))` — the chart card should consume all of that minus the filter bar height.
- [x] The Patient Pathways view (`#patient-pathways-view`) should also be a flex column that fills height, so the chart card can stretch.
- [x] Verify: Icicle/Sankey charts fill the available viewport height, not just a fixed 500px minimum
- **Checkpoint**: Patient Pathways chart uses all available vertical space below the filter bar ✓
### 11.4 Filter modals — improve aesthetics for large screens
- [ ] In `dash_app/components/modals.py`: