diff --git a/IMPLEMENTATION_PLAN.md b/IMPLEMENTATION_PLAN.md index 27f64c0..2eb4771 100644 --- a/IMPLEMENTATION_PLAN.md +++ b/IMPLEMENTATION_PLAN.md @@ -652,26 +652,22 @@ User feedback after Phase 10 completion. Four layout/aesthetics issues on both P - **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`: - - Drug modal: increase chip `size` from `"xs"` to `"sm"` or `"md"` for readability. Increase modal `size` from `"lg"` to `"xl"` or a fixed width (e.g., `"70%"` or `900px`). Add `dmc.SimpleGrid` or `dmc.Group(wrap="wrap")` with consistent gap to fix spacing/layout of chips. - - Trust modal: increase chip `size` from `"xs"` to `"sm"`. Increase modal `size` from `"sm"` to `"md"`. Use `dmc.Stack` for vertical layout of trust chips (7 items don't need wrapping). - - Directorate modal: review accordion spacing and text sizes. Ensure indication items and drug badges are clearly readable. -- [ ] In `dash_app/assets/nhs.css`, add/update modal CSS: - - Ensure `.modal-chips-scroll` has appropriate max-height and padding - - Chip labels should use the project font (Source Sans 3) at readable size - - Fix any broken text wrapping or extra whitespace between chip options - - Consider responsive modal sizing (percentage-based width) so large screens get proportionally larger modals -- [ ] **Use the frontend-developer agent** to review the modal layout for optimal aesthetics with 42 drugs, 7 trusts, 19 directorates × 163 indications. The agent should recommend chip sizing, grid layout, spacing, and responsive behavior for large screens (1920px+). -- [ ] Verify: Modals look polished — no broken text, consistent spacing, chips are readable at all screen sizes -- **Checkpoint**: All three filter modals are visually polished and proportionally sized for large screens +- [x] In `dash_app/components/modals.py`: + - Drug modal: chip `size` "xs" → "sm", modal `size` "lg" → "70%", added `dmc.SimpleGrid(cols=4)` layout + - Trust modal: chip `size` "xs" → "md", modal `size` "sm" → "lg", added `dmc.Stack(gap="xs")` vertical layout + - Directorate modal: modal `size` "xl" → "70%", drug fragment badge "sm" → "md", directorate text "sm" → "md", count badge "xs" → "sm" +- [x] In `dash_app/assets/nhs.css`: padding-right on scroll container, white-space: nowrap on chip labels, .mantine-Modal-title width: 100% +- [x] **Used frontend-developer agent** for UX review: recommended 4-col SimpleGrid for drugs, Stack for trusts, percentage-based modal widths, specific size bumps per component +- [x] Verify: App starts cleanly, 20 callbacks, no regressions +- **Checkpoint**: All three filter modals are visually polished and proportionally sized for large screens ✓ ### Phase 11 Completion Criteria -- [ ] "Clear All Filters" button is left-aligned next to filter buttons -- [ ] Trust Comparison charts are readable with no overspill -- [ ] Patient Pathways chart fills available viewport height -- [ ] Filter modals are aesthetically polished with readable chip sizes -- [ ] `python run_dash.py` starts cleanly -- [ ] No regressions in existing functionality +- [x] "Clear All Filters" button is left-aligned next to filter buttons +- [x] Trust Comparison charts are readable with no overspill +- [x] Patient Pathways chart fills available viewport height +- [x] Filter modals are aesthetically polished with readable chip sizes +- [x] `python run_dash.py` starts cleanly +- [x] No regressions in existing functionality --- diff --git a/dash_app/assets/nhs.css b/dash_app/assets/nhs.css index b43f94a..0e085e6 100644 --- a/dash_app/assets/nhs.css +++ b/dash_app/assets/nhs.css @@ -341,9 +341,14 @@ body { .modal-chips-scroll { max-height: 60vh; overflow-y: auto; + padding-right: 8px; } .modal-chips-scroll .mantine-Chip-label { font-family: 'Source Sans 3', Arial, sans-serif; + white-space: nowrap; +} +.mantine-Modal-title { + width: 100%; } .modal-drug-badge { cursor: pointer; diff --git a/dash_app/components/modals.py b/dash_app/components/modals.py index e4807a7..7f544d8 100644 --- a/dash_app/components/modals.py +++ b/dash_app/components/modals.py @@ -35,7 +35,7 @@ def _make_directorate_accordion_item(directorate: str, indications: dict[str, li frag, id={"type": "drug-fragment", "index": f"{directorate}|{search_term}|{frag}"}, variant="light", - size="sm", + size="md", className="modal-drug-badge", style={"cursor": "pointer"}, ) @@ -54,10 +54,10 @@ def _make_directorate_accordion_item(directorate: str, indications: dict[str, li dmc.Group( gap="xs", children=[ - dmc.Text(directorate.title(), fw=600, size="sm"), + dmc.Text(directorate.title(), fw=600, size="md"), dmc.Badge( str(len(indications)), - size="xs", + size="sm", variant="light", color="gray", ), @@ -82,7 +82,7 @@ def make_drug_modal(): id="drug-modal", opened=False, centered=True, - size="lg", + size="70%", title=dmc.Group( justify="space-between", style={"width": "100%"}, @@ -112,8 +112,15 @@ def make_drug_modal(): multiple=True, value=[], children=[ - dmc.Chip(drug, value=drug, size="xs") - for drug in drugs + dmc.SimpleGrid( + cols=4, + spacing="sm", + verticalSpacing="xs", + children=[ + dmc.Chip(drug, value=drug, size="sm") + for drug in drugs + ], + ), ], ), ], @@ -143,7 +150,7 @@ def make_trust_modal(): id="trust-modal", opened=False, centered=True, - size="sm", + size="lg", title=dmc.Group( justify="space-between", style={"width": "100%"}, @@ -164,8 +171,13 @@ def make_trust_modal(): multiple=True, value=[], children=[ - dmc.Chip(trust, value=trust, size="xs") - for trust in trusts + dmc.Stack( + gap="xs", + children=[ + dmc.Chip(trust, value=trust, size="md") + for trust in trusts + ], + ), ], ), dmc.Space(h=12), @@ -200,7 +212,7 @@ def make_directorate_modal(): id="directorate-modal", opened=False, centered=True, - size="xl", + size="70%", title=dmc.Text("Browse by Directorate", fw=600, size="lg"), overlayProps={"backgroundOpacity": 0.55, "blur": 3}, children=[