Mobile Responsive App — Feature Spec¶

Date: 2026-04-10 Status: Partially implemented in Session 37 — mobile responsive fixes shipped; full spec not yet complete Repo: curaway-health-navigator (frontend) Audit source: Session 35 mobile responsiveness audit (25 findings)

1. Summary¶

The conversational UI (/app) is desktop-first. On mobile (375px), the icon rail + panels + chat don't fit — the core flow is unusable. This spec covers all 25 audit findings (6 P0, 9 P1, 10 P2) with a mobile-first navigation pattern and systematic responsive fixes.

2. Mobile Navigation Pattern¶

Current (desktop-only)¶

┌──────┬────────────┬─────────────┐
│ Icon │   Left     │   Chat +    │
│ Rail │  Panel     │  Input Bar  │
│ 56px │  360px     │  flex-1     │
└──────┴────────────┴─────────────┘

Proposed (< md breakpoint = 768px)¶

┌─────────────────────────────┐
│  Top Bar (case + avatar)    │
├─────────────────────────────┤
│                             │
│     Chat + Messages         │
│                             │
├─────────────────────────────┤
│  Input Bar + safe-area      │
├─────────────────────────────┤
│  Bottom Nav (4 icons)       │
└─────────────────────────────┘

Panels open as full-screen overlays with slide-up animation

Bottom nav icons: Cases | EHR | Docs | Summary (same 4 as the icon rail, minus the "new case" button which moves to the top bar).

New case button: Moves to the top bar left side on mobile (replaces the icon rail's orange + button).

3. File-by-File Changes¶

P0 — Layout Fixes¶

3.1 ConversationApp.tsx¶

New: Add <MobileBottomNav> component after input bar, visible only below md. Renders the 4 panel icons as a bottom tab bar.

New: Add <MobileTopBar> variant of the header that includes the new-case button on the left (replaces icon rail's + button).

3.2 IconRail.tsx¶

No mobile rendering — replaced by <MobileBottomNav>.

3.3 LeftPanel.tsx¶

3.4 CasePanel.tsx (right progress panel)¶

3.5 FullEHRDrawer.tsx¶

3.6 ProgressStrip.tsx¶

3.7 EHRPanel.tsx¶

P1 — UX Improvements¶

3.8 Auth.tsx¶

3.9 ConversationApp.tsx — Messages¶

3.10 ConversationApp.tsx — Input Bar¶

3.11 ConversationApp.tsx — File Upload¶

3.12 CaseConfirmation.tsx¶

3.13 CurawayUserMenu.tsx¶

P2 — Polish¶

3.14 Tables — overflow containers¶

All <table> elements in EHRPanel, FullEHRDrawer, SummaryPanel: wrap in <div className="overflow-x-auto">.

3.15 RequirementsChecklist — badge wrapping¶

3.16 FullEHRDrawer sidebar responsive¶

3.17 Scrollbar touch targets¶

3.18 Font sizes — minimum 11px on mobile¶

Scan all text-[10px] occurrences and replace with text-[11px] md:text-[10px] for mobile readability.

3.19 Swipe gestures (future)¶

CasePanel, LeftPanel overlays — add swipe-to-close. Requires @use-gesture/react or manual touch event handling. Defer to follow-up PR.

3.20 Dark mode — status badges¶

Status badges (red/amber/green/blue) are hardcoded. They look fine in dark mode because they're self-contained color pairs (bg + text). No change needed.

4. New Component: MobileBottomNav¶

// src/components/MobileBottomNav.tsx (~40 LOC)
// Visible only below md breakpoint
// 4 icons: Cases, EHR, Docs, Summary
// Active state matches leftPanel state
// Tapping toggles the corresponding full-screen overlay panel

interface MobileBottomNavProps {
  activePanel: PanelId | null;
  hasCaseId: boolean;
  onPanelSelect: (panel: PanelId) => void;
}

Rendered in ConversationApp after the input bar:

<div className="md:hidden">
  <MobileBottomNav
    activePanel={leftPanel}
    hasCaseId={!!caseId}
    onPanelSelect={openPanel}
  />
</div>

Styling: fixed bottom-0 left-0 right-0 with safe-area padding, bg-chat-surface border-t border-chat-border, 4 equal-width icon buttons at 44px height minimum.

5. New Component: MobileTopBar¶

Not a new component — modify the existing <header> in ConversationApp to include the new-case button on mobile:

<header className="h-12 md:h-11 bg-chat-surface border-b ...">
  {/* Mobile: new case button (replaces icon rail + button) */}
  <button className="md:hidden w-8 h-8 rounded-lg bg-chat-brand ..."
    onClick={handleNewCase}>
    <Plus className="w-4 h-4 text-white" />
  </button>
  {/* Case number + procedure */}
  ...
  <CurawayUserMenu />
</header>

6. Breakpoint Strategy¶

Using Tailwind's md: (768px) and lg: (1024px) breakpoints.

Edge Cases¶

All P0 and P1 items are layout/CSS changes with straightforward behavior. The edge cases below apply to the remaining P2/P3 items and to the mobile navigation pattern as a whole.

7. Implementation Checklist¶

Model guidance: Opus for layout architecture decisions, Sonnet for mechanical CSS/class changes.

P0 (must-ship)¶

Opus: - [ ] ConversationApp: flex-col md:flex-row root layout — layout architecture - [ ] Hamburger drawer with panel nav + recent cases — new component, navigation UX

Sonnet: - [ ] Hide IconRail on mobile (hidden md:flex) - [ ] LeftPanel: w-full md:w-[360px] + fixed overlay on mobile - [ ] CasePanel: w-full md:w-[360px] - [ ] ProgressStrip: w-full md:w-[280px] - [ ] FullEHRDrawer: safe-area padding + name truncate - [ ] EHRPanel: overflow-x-auto on table - [ ] Mobile top bar: hamburger + left-aligned title

P1 (should-ship) — all Sonnet¶

• [ ] Auth card: max-w-[calc(100vw-2rem)] sm:max-w-[420px]
• [ ] Agent messages: max-w-full md:max-w-[85%]
• [ ] Timestamps: text-[11px] md:text-[10px]
• [ ] Input bar: safe-area bottom padding + floating rounded card
• [ ] Rich cards: max-w-full wrapper
• [ ] File upload: capture="environment" on file input
• [ ] CaseConfirmation: px-4 md:px-6
• [ ] CurawayUserMenu dropdown: max-w-[calc(100vw-2rem)]
• [ ] IconRail buttons: w-11 h-11 (44px touch targets)
• [ ] FullEHRDrawer header: truncate patient name
• [ ] interactive-widget=resizes-content viewport meta

P2 (follow-up) — all Sonnet¶

• [ ] All tables: overflow-x-auto wrapper
• [ ] RequirementsChecklist: responsive badge layout
• [ ] FullEHRDrawer sidebar: stack on mobile
• [ ] Remove scrollbar-thin on mobile
• [ ] Minimum 11px font size on mobile
• [ ] Swipe-to-close gestures (future — needs gesture library)

8. Test Plan¶

Device matrix¶

• iPhone SE (375px) — smallest target
• iPhone 14 (390px) — most common
• iPhone 14 Pro Max (430px) — large phone
• iPad (768px) — tablet breakpoint edge
• iPad Pro (1024px) — lg breakpoint edge

Flows to test per device¶

1. Sign in → lands in /app
2. Start new case → type message → get response
3. Upload document → see progress → see analysis
4. Open Cases panel → switch cases
5. Open EHR panel → scroll through data
6. Open Docs panel → see document list
7. Open Summary panel → see case summary
8. Open FullEHRDrawer → navigate sections
9. Switch theme (dark mode on mobile)
10. Rotate device (portrait ↔ landscape)

Accessibility¶

• All touch targets ≥ 44x44px
• Text ≥ 11px on mobile
• Focus visible on all interactive elements
• Screen reader announces panel open/close
• No horizontal scroll on any view

9. Risks¶

10. Out of Scope¶

• Storefront pages (already responsive via StorefrontLayout)
• Native app / PWA (future)
• Offline support
• Push notifications on mobile
• Camera capture for document upload (future — use capture="environment" on file input)