diff --git a/IMPLEMENTATION_PLAN.md b/IMPLEMENTATION_PLAN.md index e3f8647..27f64c0 100644 --- a/IMPLEMENTATION_PLAN.md +++ b/IMPLEMENTATION_PLAN.md @@ -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`: diff --git a/dash_app/assets/nhs.css b/dash_app/assets/nhs.css index 1db57dd..b43f94a 100644 --- a/dash_app/assets/nhs.css +++ b/dash_app/assets/nhs.css @@ -187,8 +187,17 @@ body { margin-left: var(--sidebar-w); margin-top: var(--header-total-h); padding: 24px; - min-height: calc(100vh - var(--header-total-h)); + height: calc(100vh - var(--header-total-h)); display: flex; flex-direction: column; gap: 20px; + overflow-y: auto; +} + +/* View containers — flex chain for chart to fill height */ +#view-container { + flex: 1; display: flex; flex-direction: column; min-height: 0; +} +#patient-pathways-view { + flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 20px; } /* ── Patient Pathways Filter Strip ── */ @@ -250,6 +259,18 @@ body { border: 1px solid var(--nhs-pale-grey); flex: 1; display: flex; flex-direction: column; + min-height: 0; +} +/* Flex chain through dcc.Loading wrapper → chart container → dcc.Graph */ +#chart-container { + flex: 1; display: flex; flex-direction: column; min-height: 0; +} +#pathway-chart { + flex: 1; min-height: 0; +} +.chart-card > .dash-loading-callback, +.chart-card > .dash-loading-callback > div { + flex: 1; display: flex; flex-direction: column; min-height: 0; } .chart-card__header { padding: 16px 20px; diff --git a/dash_app/components/chart_card.py b/dash_app/components/chart_card.py index febf464..cbbc2ab 100644 --- a/dash_app/components/chart_card.py +++ b/dash_app/components/chart_card.py @@ -81,7 +81,8 @@ def make_chart_card(): children=[ dcc.Graph( id="pathway-chart", - style={"minHeight": "500px", "flex": "1"}, + style={"flex": "1", "minHeight": "0"}, + responsive=True, config={ "displayModeBar": True, "displaylogo": False,