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
dash_app/assets/nhs.css
+22 -1
View File
@@ -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;