From 1ca6175b93fb44ee76d9d32f27b751db78d345e5 Mon Sep 17 00:00:00 2001 From: Andy Charlwood Date: Sat, 14 Feb 2026 18:51:05 +0000 Subject: [PATCH] feat: US-015 - Explore parent header typography options Tested 14 combinations across Elvaro Grotesque (300-900) and Blumir (100-700), varying size, case, and letter-spacing. Selected Elvaro Grotesque 600, 2.2rem, title case, -0.02em tracking for premium clinical feel with clear visual hierarchy. --- Ralph/prd.json | 6 ++-- Ralph/progress.txt | 73 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+), 3 deletions(-) diff --git a/Ralph/prd.json b/Ralph/prd.json index f8e4991..ea9cebd 100644 --- a/Ralph/prd.json +++ b/Ralph/prd.json @@ -250,7 +250,7 @@ "Verify in browser using dev-browser skill at 375px, 768px, 1024px, and 1920px widths" ], "priority": 14, - "passes": false, + "passes": true, "notes": "Use Playwright to resize browser and take snapshots at each breakpoint. Fix any overflow, wrapping, or spacing issues found." }, { @@ -269,8 +269,8 @@ "Verify in browser using dev-browser skill" ], "priority": 15, - "passes": false, - "notes": "This story is about visual exploration. Try different combinations and screenshot them. The chosen option will be applied in the next story. Layout must already be in place (US-005 through US-009) so fonts can be judged in context. Use the bencium-innovative-ux-designer skill approach for design evaluation." + "passes": true, + "notes": "Explored 14 options across Elvaro (300-900) and Blumir (100-700), title case vs uppercase, sizes 1.4-3rem, various tracking. Selected: Elvaro Grotesque 600, 2.2rem, title case, -0.02em tracking. Rationale: font consistency, tight tracking feels premium, slightly reduced size is more data-dense/clinical, clear hierarchy above sub-headers." }, { "id": "US-016", diff --git a/Ralph/progress.txt b/Ralph/progress.txt index 646abbd..0ebc27f 100644 --- a/Ralph/progress.txt +++ b/Ralph/progress.txt @@ -1029,3 +1029,76 @@ - Dynamically iterating over data arrays (consultations, investigations, skills) is more maintainable than hardcoded entries — data changes propagate automatically - The `expand` palette action type is still in the union but no longer used by any items — keeping the handler in DashboardLayout is harmless --- + +## Iteration 14 — US-014: Responsive verification and fixes (2026-02-14) + +### Status: PASSED ✅ + +### Changes +- **Card.tsx**: Added `minWidth: 0` and `overflow: 'hidden'` to base styles — fixes CSS Grid items defaulting to `min-width: auto` which prevented shrinking below intrinsic content width, causing 912px-wide articles at 375px viewport +- **ParentSection.tsx**: Replaced fixed `fontSize: '2.4rem'` with responsive Tailwind classes: `text-[1.5rem] sm:text-[1.8rem] md:text-[2rem] lg:text-[2.4rem]` — scales parent section headers appropriately across breakpoints +- **PatientSummaryTile.tsx**: Made KPI grid responsive — replaced hardcoded `gridTemplateColumns: '1fr 1fr'` with `grid-cols-1 xs:grid-cols-2` so KPIs stack single-column below 480px +- **SubNav.tsx**: Fixed two issues: + 1. Changed `justifyContent: 'center'` to left-aligned by default with `md:justify-center` — prevents first nav item being pushed off-screen at mobile widths + 2. Updated stale tileIds (`core-skills`, `career-activity`, `education`) to match restructured dashboard anchors (`section-skills`, `section-experience`, `section-education`) +- **DashboardLayout.tsx**: Added `data-tile-id` wrapper divs around WorkExperienceSubsection, RepeatMedicationsSubsection, and EducationSubsection so SubNav can scroll to these sections within Patient Pathway + +### Verification (Playwright at 4 breakpoints) +- **375px (mobile)**: Single column, all articles 343px, no overflow, constellation SVG 301×250, pathway columns stacked, KPI grid single-column, SubNav starts from left edge +- **768px (tablet)**: Two-column grid (352px each), full-width tiles 720px, pathway columns side-by-side (331px), KPI 2-column, sidebar hidden, no overflow +- **1024px (desktop)**: Sidebar visible at 272px, two-column grid (340px each), full-width tiles 696px, pathway columns 2-column (319px), constellation SVG 678px +- **1920px (wide)**: Two-column grid (788px each), full-width tiles 1592px, pathway columns 767px each, constellation SVG 1550px, well-balanced layout +- **No horizontal scrollbar at any breakpoint** (`scrollWidth === clientWidth` confirmed at all 4 widths) + +### Learnings +- CSS Grid items default to `min-width: auto` — always add `minWidth: 0` + `overflow: hidden` to grid item components to prevent content blowout +- SubNav tileIds must be updated whenever dashboard sections are restructured — stale IDs cause scroll-to-section to silently fail +- The `justifyContent: 'center'` on a scrollable flex container pushes the first items off-screen at narrow viewports — use media-query-based centering instead +--- + +## Iteration 15 — US-015: Explore parent header typography options +**Status**: PASS +**Commit**: (this iteration) + +### What was done +Visual exploration of parent section header typography. Tested 14 combinations in Playwright by dynamically applying styles to the h2 elements and taking screenshots. + +### Options tested + +| # | Font | Weight | Size | Case | Tracking | Verdict | +|---|------|--------|------|------|----------|---------| +| 00 | Elvaro | 700 | 2.4rem | Title | normal | Baseline — solid but generic bold | +| 01 | Elvaro | 500 | 2.4rem | Title | normal | Nearly identical to 700 | +| 02 | Elvaro | 300 | 2.4rem | Title | normal | Lighter, more elegant | +| 03 | Elvaro | 600 | 2.2rem | Title | -0.02em | **SELECTED** — compact, refined, premium | +| 04 | Elvaro | 400 | 2.6rem | Title | -0.03em | Light + large, premium but lacks authority | +| 05 | Elvaro | 900 | 2.4rem | Title | normal | ~Same as 700 (font caps out) | +| 06 | Elvaro | 600 | 1.4rem | Upper | 0.08em | Too similar to sub-headers | +| 07 | Elvaro | 500 | 1.8rem | Upper | 0.05em | Strong clinical feel, runner-up | +| 08 | Blumir | 500 | 2.4rem | Title | -0.01em | Distinct geometric character | +| 09 | Blumir | 300 | 2.8rem | Title | -0.02em | Elegant but lacks authority | +| 10 | Blumir | 700 | 2.4rem | Title | -0.02em | Bold, assertive geometric | +| 11 | Blumir | 100 | 3rem | Title | -0.01em | Too thin/delicate | +| 12 | Blumir | 500 | 1.6rem | Upper | 0.06em | Blurs with sub-headers | +| 13 | Elvaro | 600 | 2.4rem | Title | -0.02em | Teal color — competes with KPI accents | +| 14 | Blumir | 400 | 2.6rem | Title | -0.03em | Clean, refined, distinct from body | + +### Selection: Option 3 — Elvaro Grotesque 600, 2.2rem, title case, -0.02em + +**Rationale:** +- Font consistency (Elvaro throughout) — one typeface used well > two fonts competing +- 600 weight with -0.02em tracking feels deliberately chosen, not default +- Slightly smaller than baseline (2.2rem vs 2.4rem) is more data-dense/clinical +- Title case preserves warmth and readability vs uppercase +- Clear hierarchy: parent headers (2.2rem/600) > sub-headers (12px/600 uppercase) > body (13px/400) +- Tight tracking gives premium, considered quality + +**Runner-up:** Option 7 (Elvaro 500, 1.8rem, uppercase, 0.05em) — strongest clinical identity but more austere + +### Key observations +- Elvaro weights 500/700/900 render nearly identically — the font has limited visual weight range +- Blumir's geometric character creates nice font contrast but mixing two typefaces adds complexity without clear benefit +- Uppercase headers need careful sizing to not blur with the 12px uppercase sub-headers (LATEST RESULTS, etc.) +- Teal-colored headers compete with KPI accent values — parent headers should stay in text-primary +- Tight negative tracking (-0.02em to -0.03em) consistently improves the premium feel at heading sizes +---