Mobile responsive: hamburger sidebar + responsive grids

Ports the Weather AI 2 sidebar pattern: off-canvas drawer with backdrop
on mobile, persistent rail on lg+. Adds mobile header with menu button.
Replaces inline repeat(N, 1fr) grids with responsive Tailwind classes
across Dashboard, Zones, Disbursements, ProgramDesigner, and Pipeline.
Tour tooltip clamped to viewport width.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Routes, Route, useNavigate } from 'react-router-dom'
 import Joyride, { type CallBackProps, STATUS, EVENTS, ACTIONS } from 'react-joyride'
+import { Menu } from 'lucide-react'
 import Sidebar from './components/Sidebar'
 import Dashboard from './pages/Dashboard'
 import Zones from './pages/Zones'
@@ -45,6 +46,7 @@ function stepTargetSelector(index: number): string | null {
 export default function App() {
   const [runTour, setRunTour] = useState(false)
   const [stepIndex, setStepIndex] = useState(0)
+  const [sidebarOpen, setSidebarOpen] = useState(false)
   const navigate = useNavigate()
 
   // Joyride autostart is intentionally disabled in the reskin — the tour
@@ -100,10 +102,23 @@ export default function App() {
 
   return (
     <div className="flex min-h-screen bg-paper">
-      <Sidebar />
+      <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 
-      <main className="flex-1 ml-56">
-        <div className="px-8 sm:px-12 pt-16 pb-16" style={{ maxWidth: '1180px' }}>
+      <main className="flex-1 lg:ml-56 min-w-0">
+        <header
+          className="flex items-center h-12 px-4 lg:hidden"
+          style={{ background: '#ffffff' }}
+        >
+          <button
+            onClick={() => setSidebarOpen(true)}
+            aria-label="Open navigation menu"
+            className="p-2 -ml-2"
+            style={{ color: '#606373', background: 'none', border: 'none' }}
+          >
+            <Menu size={20} />
+          </button>
+        </header>
+        <div className="px-4 sm:px-8 lg:px-12 pt-6 lg:pt-16 pb-16" style={{ maxWidth: '1180px' }}>
           <Routes>
             <Route path="/" element={<Dashboard />} />
             <Route path="/zones" element={<Zones />} />

frontend/src/components/Sidebar.tsx

@@ -5,6 +5,7 @@ import {
   SlidersHorizontal,
   Banknote,
   Settings,
+  X,
 } from 'lucide-react'
 
 const NAV_ITEMS = [
@@ -15,15 +16,34 @@ const NAV_ITEMS = [
   { to: '/pipeline', label: 'How it works', icon: Settings, tourId: 'nav-pipeline' },
 ]
 
-export default function Sidebar() {
+interface Props {
+  open: boolean
+  onClose: () => void
+}
+
+export default function Sidebar({ open, onClose }: Props) {
   return (
-    <aside
-      className="fixed top-0 left-0 z-50 h-full w-56 flex flex-col"
-      style={{ background: '#1b1e2d' }}
-    >
+    <>
+      {open && (
+        <div
+          className="fixed inset-0 z-40 lg:hidden"
+          style={{ background: 'rgba(27, 30, 45, 0.4)' }}
+          onClick={onClose}
+        />
+      )}
+
+      <aside
+        className={`
+          fixed top-0 left-0 z-50 h-full w-56
+          flex flex-col transition-transform duration-200 ease-in-out
+          lg:translate-x-0
+          ${open ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
+        `}
+        style={{ background: '#1b1e2d' }}
+      >
       {/* Brand */}
       <div
-        className="flex items-center h-16 px-5"
+        className="flex items-center justify-between h-16 px-5"
         style={{ borderBottom: '1px solid rgba(255,255,255,0.06)' }}
       >
         <Link to="/" className="flex items-baseline gap-2 no-underline">
@@ -39,6 +59,14 @@ export default function Sidebar() {
             Heat insurance
           </span>
         </Link>
+        <button
+          onClick={onClose}
+          aria-label="Close navigation menu"
+          className="lg:hidden p-1"
+          style={{ color: '#8d909e', background: 'none', border: 'none' }}
+        >
+          <X size={18} />
+        </button>
       </div>
 
       {/* Navigation */}
@@ -49,6 +77,7 @@ export default function Sidebar() {
             to={to}
             end={to === '/'}
             data-tour={tourId}
+            onClick={onClose}
             className="sidebar-link"
           >
             <Icon size={16} style={{ flexShrink: 0 }} />
@@ -71,6 +100,8 @@ export default function Sidebar() {
         Worker personas are simulated
       </div>
 
+      </aside>
+
       <style>{`
         .sidebar-link {
           display: flex;
@@ -93,6 +124,6 @@ export default function Sidebar() {
           border-left-color: #8a3d28;
         }
       `}</style>
-    </aside>
+    </>
   )
 }

frontend/src/lib/tour.ts

@@ -135,7 +135,7 @@ export const tourStyles = {
   tooltip: {
     borderRadius: 10,
     padding: '20px 22px',
-    maxWidth: 400,
+    maxWidth: 'min(400px, calc(100vw - 32px))',
     fontFamily: '"DM Sans", system-ui, sans-serif',
     fontSize: '0.88rem',
     lineHeight: 1.6,

frontend/src/pages/Dashboard.tsx

@@ -282,16 +282,12 @@ function PipelineHero() {
 
       {/* Step row */}
       <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: `repeat(${HERO_STEPS.length}, 1fr)`,
-          gap: '8px',
-          position: 'relative',
-        }}
+        className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-2 relative"
         data-tour="stage-cards"
       >
         {/* connector line animated on mount */}
         <div
+          className="hidden md:block"
           style={{
             position: 'absolute',
             top: '20px',
@@ -311,6 +307,7 @@ function PipelineHero() {
             <button
               key={s.num}
               onMouseEnter={() => !locked && setSelected(i)}
+              onFocus={() => !locked && setSelected(i)}
               onClick={() => {
                 setSelected(i)
                 setLocked(true)
@@ -393,13 +390,11 @@ function PipelineHero() {
       {/* Detail + output panel */}
       <div
         key={step.num}
-        className="animate-fade-in"
+        className="animate-fade-in grid grid-cols-1 md:[grid-template-columns:minmax(0,1fr)_minmax(0,1.1fr)]"
         style={{
           marginTop: '24px',
           paddingTop: '20px',
           borderTop: '1px solid #e8e5e1',
-          display: 'grid',
-          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)',
           columnGap: '32px',
           rowGap: '14px',
           alignItems: 'start',
@@ -502,10 +497,8 @@ export default function Dashboard() {
       {/* KPI row */}
       <div
         data-tour="metrics"
+        className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8"
         style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(4, 1fr)',
-          gap: '32px',
           borderTop: '1px solid #e8e5e1',
           paddingTop: '20px',
           marginTop: '12px',

frontend/src/pages/Disbursements.tsx

@@ -322,7 +322,8 @@ function SimulatedPayoutTab({
             border: '1px solid #e8e5e1',
             background: '#fcfaf7',
             borderRadius: '2px',
-            minWidth: '220px',
+            width: '100%',
+            maxWidth: '320px',
           }}
         >
           {zonesWithEnrollees.map((z) => {
@@ -879,10 +880,8 @@ export default function Disbursements() {
       {/* Metric row */}
       <div
         data-tour="disbursements-metrics"
+        className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8"
         style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(4, 1fr)',
-          gap: '32px',
           borderTop: '1px solid #e8e5e1',
           paddingTop: '28px',
           marginBottom: '40px',

frontend/src/pages/Pipeline.tsx

@@ -44,10 +44,8 @@ function HowItWorksSection() {
   return (
     <div style={{ marginBottom: '24px' }}>
       <div
+        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-7"
         style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
-          gap: '28px',
           borderTop: '1px solid #e8e5e1',
           paddingTop: '18px',
         }}
@@ -109,11 +107,7 @@ function ScalingCostPanel() {
         What it costs to run at scale
       </div>
       <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
-          gap: '32px',
-        }}
+        className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8"
       >
         {TIERS.map((tier) => (
           <div key={tier.label} style={{ borderTop: '1px solid #e8e5e1', paddingTop: '14px' }}>
@@ -550,11 +544,7 @@ export default function Pipeline() {
                             Processing steps
                           </div>
                           <div
-                            style={{
-                              display: 'grid',
-                              gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
-                              gap: '16px',
-                            }}
+                            className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4"
                           >
                             {run.steps.map((step, i) => (
                               <div

frontend/src/pages/ProgramDesigner.tsx

@@ -132,10 +132,8 @@ export default function ProgramDesigner() {
       <div data-tour="program-scope" style={{ marginBottom: '48px' }}>
         <div className="section-header">Who's covered</div>
         <div
+          className="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8"
           style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-            gap: '32px',
             borderTop: '1px solid #e8e5e1',
             paddingTop: '24px',
           }}
@@ -167,12 +165,10 @@ export default function ProgramDesigner() {
       <div data-tour="program-cost" style={{ marginBottom: '48px' }}>
         <div className="section-header">What it costs</div>
         <div
+          className="grid grid-cols-1 md:grid-cols-[1.4fr_1fr_1fr] gap-6 md:gap-8"
           style={{
             borderTop: '1px solid #e8e5e1',
             paddingTop: '28px',
-            display: 'grid',
-            gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr)',
-            gap: '32px',
             alignItems: 'end',
           }}
         >

frontend/src/pages/Zones.tsx

@@ -97,10 +97,8 @@ export default function Zones() {
       {/* Metric row */}
       <div
         data-tour="zones-metrics"
+        className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8"
         style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(4, 1fr)',
-          gap: '32px',
           borderTop: '1px solid #e8e5e1',
           paddingTop: '28px',
           marginBottom: '36px',