From b99dc86188d055753779f1ea76f43a49876da905 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 15 Feb 2026 22:47:46 +0000
Subject: [PATCH] =?UTF-8?q?Add=20mobile=20responsiveness=20=E2=80=94=20bot?=
 =?UTF-8?q?tom=20tab=20bar=20+=20compact=20layout=20for=20phones?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On mobile (<768px), the sidebar was hidden with no replacement navigation,
making it impossible to switch tabs. This adds a fixed bottom tab bar with
all 10 tabs (horizontally scrollable), compacts the header, tightens table
column widths for assumptions tables, and adjusts spacing. All changes are
behind a 768px media query — desktop layout is untouched.

https://claude.ai/code/session_01PHK9qmguUSTyvykAoho467
---
 src/App.jsx        |  13 ++++++
 src/styles/app.css | 104 ++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 116 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index dd2113b..705cab4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -286,6 +286,19 @@ function App() {
           </div>
         </main>
       </div>
+
+      <nav className="mobile-tab-bar">
+        {TABS.map(tab => (
+          <button
+            key={tab.id}
+            className={`mobile-tab-item ${activeTab === tab.id ? 'active' : ''}`}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            <span className="mobile-tab-icon">{tab.icon}</span>
+            <span className="mobile-tab-label">{tab.label}</span>
+          </button>
+        ))}
+      </nav>
     </div>
   );
 }
diff --git a/src/styles/app.css b/src/styles/app.css
index 91c8f29..a54bc57 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -956,12 +956,114 @@
   }
 }
 
+/* ─── Mobile tab bar (hidden on desktop) ─── */
+.mobile-tab-bar {
+  display: none;
+}
+
 @media (max-width: 768px) {
   .sidebar {
     display: none;
   }
 
+  /* Header: compact */
+  .header {
+    padding: 0 var(--space-sm);
+    height: 44px;
+  }
+
+  .logo-text {
+    font-size: 0.8125rem;
+  }
+
+  .scenario-badge {
+    font-size: 0.75rem;
+    padding: 3px 8px;
+  }
+
+  /* Main content: tighter padding, room for bottom bar */
   .main-content {
-    padding: var(--space-md);
+    padding: var(--space-sm) var(--space-sm) 64px;
+  }
+
+  /* Assumptions: single column, tighter */
+  .assumptions-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .assumption-block {
+    padding: var(--space-sm) var(--space-md);
+  }
+
+  .assumptions-table-wrap {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .assumptions-year-cell {
+    width: 80px;
+  }
+
+  .assumptions-header-cell {
+    min-width: 60px;
+  }
+
+  .assumptions-header-label {
+    min-width: 70px;
+  }
+
+  /* Mobile bottom tab bar */
+  .mobile-tab-bar {
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 56px;
+    background: var(--bg-primary);
+    border-top: 1px solid var(--border-color);
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    z-index: 100;
+    padding: 0 var(--space-xs);
+    gap: 0;
+    scrollbar-width: none;
+  }
+
+  .mobile-tab-bar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .mobile-tab-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    min-width: 64px;
+    padding: 6px 8px;
+    border: none;
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    flex-shrink: 0;
+    font-family: inherit;
+    transition: color var(--transition-fast);
+  }
+
+  .mobile-tab-item.active {
+    color: var(--text-primary);
+    font-weight: 600;
+  }
+
+  .mobile-tab-icon {
+    font-size: 1.125rem;
+    line-height: 1;
+  }
+
+  .mobile-tab-label {
+    font-size: 0.5625rem;
+    line-height: 1;
+    white-space: nowrap;
   }
 }