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

- 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
+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 ✓ - **Checkpoint**: All 6 Trust Comparison charts render at a readable size without overspill ✓
### 11.3 Patient Pathways chart — fill available screen height ### 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. - [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.
- [ ] 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] 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. - [x] 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 - [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 - **Checkpoint**: Patient Pathways chart uses all available vertical space below the filter bar
### 11.4 Filter modals — improve aesthetics for large screens ### 11.4 Filter modals — improve aesthetics for large screens
- [ ] In `dash_app/components/modals.py`: - [ ] In `dash_app/components/modals.py`:
+22 -1
View File
@@ -187,8 +187,17 @@ body {
margin-left: var(--sidebar-w); margin-left: var(--sidebar-w);
margin-top: var(--header-total-h); margin-top: var(--header-total-h);
padding: 24px; padding: 24px;
min-height: calc(100vh - var(--header-total-h)); height: calc(100vh - var(--header-total-h));
display: flex; flex-direction: column; gap: 20px; 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 ── */ /* ── Patient Pathways Filter Strip ── */
@@ -250,6 +259,18 @@ body {
border: 1px solid var(--nhs-pale-grey); border: 1px solid var(--nhs-pale-grey);
flex: 1; flex: 1;
display: flex; flex-direction: column; 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 { .chart-card__header {
padding: 16px 20px; padding: 16px 20px;
+2 -1
View File
@@ -81,7 +81,8 @@ def make_chart_card():
children=[ children=[
dcc.Graph( dcc.Graph(
id="pathway-chart", id="pathway-chart",
style={"minHeight": "500px", "flex": "1"}, style={"flex": "1", "minHeight": "0"},
responsive=True,
config={ config={
"displayModeBar": True, "displayModeBar": True,
"displaylogo": False, "displaylogo": False,