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:
+22
-1
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user