From 649f4d7c68966e1225408c97f1808e2f2cda01e5 Mon Sep 17 00:00:00 2001 From: Andy Charlwood Date: Sat, 14 Feb 2026 21:39:11 +0000 Subject: [PATCH] chore: mark US-027 complete, update progress log --- Ralph/prd.json | 2 +- Ralph/progress.txt | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/Ralph/prd.json b/Ralph/prd.json index f4de32c..8a3ad36 100644 --- a/Ralph/prd.json +++ b/Ralph/prd.json @@ -214,7 +214,7 @@ "Typecheck passes" ], "priority": 10, - "passes": false, + "passes": true, "notes": "Use Playwright browser_resize to test each breakpoint. Take screenshots at each size. Fix any issues found — this may involve adding responsive overrides or adjusting min-widths." }, { diff --git a/Ralph/progress.txt b/Ralph/progress.txt index e52eda8..aec5754 100644 --- a/Ralph/progress.txt +++ b/Ralph/progress.txt @@ -49,6 +49,14 @@ - src/components/RepeatMedicationsSubsection.tsx — skill rows, category sections - src/components/ParentSection.tsx — parent heading sizing +### Responsive Breakpoints +- Sidebar shows at `lg` (1024px) — uses `lg:block` in DashboardLayout.tsx +- TopBar search bar shows at `lg` (1024px) — uses `lg:flex` in TopBar.tsx +- TopBar "Remote" label shows at `lg` (1024px) — uses `lg:inline` +- Brand switches from "HMC" to "Headhunt Medical Center" at `sm` (640px) +- Session badge switches from time-only to "Active Session · time" at `xs` (480px) +- SubNav is horizontally scrollable on mobile (overflow-x: auto, scrollbarWidth: none) + ### Sizing Context - Target display: 2560x1440 (QHD) - Current body text: 13px → target: 15px @@ -165,3 +173,33 @@ - SkillRow gap is inside CategorySection's visibleSkills container, not on the outer RepeatMedicationsSubsection --- +## 2026-02-14 — US-026 +- Evaluated ParentSection heading sizes against scaled body text at 2560x1440 +- Before: lg heading 2.2rem (35.2px), paddingBottom 1.333rem (21.3px) — ratio to 15px body was 2.35:1 +- After: lg heading 2.4rem (38.4px), paddingBottom 1.5rem (24px) — ratio restored to 2.56:1 +- Mobile/tablet breakpoints (1.375rem, 1.6rem, 1.8rem) left unchanged — they scale proportionally at smaller viewports +- Files changed: src/components/ParentSection.tsx +- **Learnings for future iterations:** + - ParentSection is used by PatientSummaryTile ("Patient Summary") and the Patient Pathway card — only 2 h2 headings in the dashboard + - The heading-to-body ratio should stay above 2.4:1 for clear visual hierarchy at QHD resolution + - Only the lg breakpoint needed adjustment — smaller breakpoints paired with smaller body text already maintain good proportions + - paddingBottom in rem scales with root font size, making it future-proof for further type scale changes +--- + +## 2026-02-14 — US-027 +- Visual regression check across 5 breakpoints: 2560x1440, 1920x1080, 1440x900, 768x1024, 375x812 +- No horizontal scrollbar at any tested width +- Issue found: TopBar search bar (minWidth 400px) and "Remote" label overflowed at 768px tablet width +- Fix: Changed search bar from `md:flex` to `lg:flex` and "Remote" label from `md:inline` to `lg:inline` in TopBar.tsx +- All other breakpoints clean — no overflow, truncation, or layout breaks +- SubNav at 375px hides "Education" tab off-screen but is scrollable (standard mobile pattern) +- npm run build and typecheck both pass +- Files changed: src/components/TopBar.tsx +- **Learnings for future iterations:** + - TopBar search bar has minWidth: 400px which is too wide for md (768px) — must use lg (1024px) breakpoint for search bar visibility + - The "Remote" label should match the search bar's breakpoint since they compete for the same horizontal space + - Sidebar already uses `lg:block` so TopBar search/Remote at `lg` is consistent with the sidebar showing + - SubNav has overflow-x: auto with scrollbarWidth: none — horizontal scroll on mobile is by design, not a bug + - At 768px without sidebar or search bar, the TopBar cleanly shows brand + A.RECRUITER + session badge +--- +