style: increase Trust Comparison chart height from 320px to 500px (Task 11.2)
Charts were overspilling 320px containers. Increased to 500px for readability. Added overflow: hidden + min-height: 0 to .tc-chart-cell to prevent any content leaking. Dashboard scrolls vertically, which is acceptable for 6 readable charts.
This commit is contained in:
@@ -638,11 +638,11 @@ User feedback after Phase 10 completion. Four layout/aesthetics issues on both P
|
|||||||
- **Checkpoint**: Clear All button is next to the filter buttons on the left ✓
|
- **Checkpoint**: Clear All button is next to the filter buttons on the left ✓
|
||||||
|
|
||||||
### 11.2 Trust Comparison charts — fix overspill and increase chart size
|
### 11.2 Trust Comparison charts — fix overspill and increase chart size
|
||||||
- [ ] In `dash_app/components/trust_comparison.py`, increase the `dcc.Graph` height from `320px` to a larger value (e.g., `450px` or use `calc()` / viewport units). Charts are currently too cramped and overspilling their containers.
|
- [x] In `dash_app/components/trust_comparison.py`, increase the `dcc.Graph` height from `320px` to a larger value (e.g., `450px` or use `calc()` / viewport units). Charts are currently too cramped and overspilling their containers.
|
||||||
- [ ] In `dash_app/assets/nhs.css`, review `.tc-dashboard__grid` and `.tc-chart-cell` — ensure charts don't overflow. Consider whether the 2×3 grid should scroll vertically rather than cramming all 6 charts into the viewport. Each chart should be comfortably readable.
|
- [x] In `dash_app/assets/nhs.css`, review `.tc-dashboard__grid` and `.tc-chart-cell` — ensure charts don't overflow. Consider whether the 2×3 grid should scroll vertically rather than cramming all 6 charts into the viewport. Each chart should be comfortably readable.
|
||||||
- [ ] The user explicitly wants BIGGER charts, not smaller. Prioritize readability over fitting everything in the viewport.
|
- [x] The user explicitly wants BIGGER charts, not smaller. Prioritize readability over fitting everything in the viewport.
|
||||||
- [ ] Verify: Trust Comparison dashboard charts are large enough to read, no text/axis overspill, scrolling is acceptable if needed
|
- [x] Verify: Trust Comparison dashboard charts are large enough to read, no text/axis overspill, scrolling is acceptable if needed
|
||||||
- **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.
|
- [ ] 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.
|
||||||
|
|||||||
@@ -467,6 +467,8 @@ body {
|
|||||||
border: 1px solid var(--nhs-pale-grey);
|
border: 1px solid var(--nhs-pale-grey);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
}
|
}
|
||||||
.tc-chart-cell__title {
|
.tc-chart-cell__title {
|
||||||
padding: 10px 16px;
|
padding: 10px 16px;
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ def _tc_chart_cell(title, graph_id):
|
|||||||
dcc.Graph(
|
dcc.Graph(
|
||||||
id=graph_id,
|
id=graph_id,
|
||||||
config={"displayModeBar": False, "displaylogo": False},
|
config={"displayModeBar": False, "displaylogo": False},
|
||||||
style={"height": "320px"},
|
style={"height": "500px"},
|
||||||
),
|
),
|
||||||
]),
|
]),
|
||||||
])
|
])
|
||||||
|
|||||||
Reference in New Issue
Block a user