Task: Replace Mobile Banner with Inline Overview Section

Remove the sticky MobilePatientBanner and replace it with a static inline section at the top of the mobile dashboard. Remove the "More" drawer from the bottom nav, since its content now lives inline at the top of the page.

Files

File	Role
`src/components/MobilePatientBanner.tsx`	DELETE — replaced by new inline section
`src/components/MobileBottomNav.tsx`	Remove "More" button + entire drawer; add Overview item; rename old Overview to "Summary"
`src/components/DashboardLayout.tsx`	Swap MobilePatientBanner for new MobileOverviewHeader; pass onSearchClick
`src/components/MobileOverviewHeader.tsx`	NEW — inline mobile header section
`src/components/ReferralFormModal.tsx`	Already exists — opened from the new section's Contact button
`src/components/Sidebar.tsx`	Reference only — button styles, URLs

What to Build

1. New `MobileOverviewHeader.tsx`

A static (not sticky) section rendered at the top of mobile <main> content, before PatientSummaryTile. Visible only when useIsMobileNav() is true. Must have data-tile-id="mobile-overview" so the bottom nav Overview button can scroll to it.

Layout (top to bottom), matching the existing "More" drawer layout in MobileBottomNav.tsx lines 273–381:

Logo + Search row — CvmisLogo (cssHeight "40px") + search button (full-width, minHeight: 44px, shows search label text). Search button calls onSearchClick prop.
Patient info section (bordered bottom with 2px solid var(--accent)):
- Avatar circle (44px, gradient, "AC") + name + role title — same layout as drawer lines 301–327
- Data rows: GPhC, Education, Location, Registered, Phone (PhoneCaptcha), Email — same as drawer lines 329–356
Tags section — tag pills, same as drawer lines 360–369
Action buttons (replacing the alerts section):
- Download CV — full-width button with icon + text label. <a> to /References/CV_v4.md, new tab. Style: accent-bordered, matches sidebar's download button.
- Three icon-only buttons in a row (equal-width grid, 3 columns):
  - Contact Patient — Send icon. Opens ReferralFormModal.
  - LinkedIn — Linkedin icon. Links to https://linkedin.com/in/andycharlwood, new tab.
  - GitHub — Github icon. Links to https://github.com/andycharlwood, new tab.
- Use the same button styles as the existing MobilePatientBanner.tsx action buttons (lines 228–323). Icon-only for the 3 buttons, accessible aria-label on each.
ReferralFormModal — render it inside this component, controlled by local showReferralForm state.

Style notes:

Use padding: 16px internally (it sits within the main content's p-3 xs:p-5 padding)
Background: var(--sidebar-bg) to match the drawer look
Bottom margin to separate from PatientSummaryTile
Border-radius: var(--radius-sm) on the whole container
Border: 1px solid var(--border)

2. Modify `MobileBottomNav.tsx`

Remove the "More" <button> from the bottom tab bar (lines 178–199)
Remove the entire drawer — the <AnimatePresence> block (lines 203–385) and all drawer state/handlers (drawerOpen, setDrawerOpen, handleDrawerKeyDown)
Remove unused imports that were only needed by the drawer: CvmisLogo, PhoneCaptcha, patient, tags, alerts, getSidebarCopy, TagPill, AlertFlag, X, Menu, Search, AlertCircle, AlertTriangle, AnimatePresence, motion, prefersReducedMotion
Rename the existing "Overview" nav item to "Summary" with the ClipboardList icon (from lucide-react). It keeps its tileId 'patient-summary'.
Add a new "Overview" nav item at position 0 (start of the array) with the UserRound icon and tileId 'mobile-overview' so it scrolls to the new header section.
The final nav item order must be: Overview, Summary, Experience, Skills (4 items, no "More").
Clean up: remove any now-unused local components (TagPill, AlertFlag)

3. Modify `DashboardLayout.tsx`

Remove MobilePatientBanner import and its render ({isMobileNav && <MobilePatientBanner />} at line 303)
Add import for new MobileOverviewHeader
Render {isMobileNav && <MobileOverviewHeader onSearchClick={handleSearchClick} />} in the same position (before <div className="dashboard-grid">)

4. Delete `MobilePatientBanner.tsx`

This component is fully replaced. Delete the file.

Success Criteria

All of the following must be true:

New overview section

MobileOverviewHeader renders at top of mobile content (before PatientSummaryTile)
Has data-tile-id="mobile-overview" attribute
Shows logo + search bar at top
Shows patient avatar, name, role, and all data rows
Shows tag pills
Shows Download CV button (full-width, icon + text)
Shows 3 icon-only buttons (Contact, LinkedIn, GitHub) in a row
Contact button opens ReferralFormModal
LinkedIn and GitHub links open in new tabs
All buttons have appropriate aria-labels
Only visible on mobile (useIsMobileNav)

Bottom nav changes

"More" button is removed from bottom nav
Drawer is completely removed (no AnimatePresence, no overlay)
New "Overview" button (UserRound icon) is first in nav and scrolls to mobile-overview section
Old "Overview" is renamed to "Summary" with ClipboardList icon, still scrolls to patient-summary
Bottom nav has exactly 4 items in order: Overview, Summary, Experience, Skills

Cleanup

MobilePatientBanner.tsx is deleted
No dead imports remain in any modified file
No unused components (TagPill, AlertFlag) remain in MobileBottomNav

Quality gates

npm run lint passes
npm run typecheck passes
npm run build passes
Playwright MCP verification passes on mobile viewport (375x812)

Constraints

Do not add new npm dependencies
Do not change server.ts or the /api/contact API contract
Preserve all accessibility attributes (aria-labels, aria-expanded, etc.)
Follow existing conventions: inline styles + Tailwind classes, TypeScript strict mode
Icons from lucide-react only
Respect prefers-reduced-motion for any animations
The new section is NOT sticky — it scrolls with content

Status

Track progress in .ralph/plan.md. When all success criteria are met, print LOOP_COMPLETE.

6.4 KiB Raw Blame History Unescape Escape