From a75aceb6e7415a482929e966787ba7d96ca57642 Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Thu, 23 Jul 2026 11:58:14 +0000
Subject: [PATCH] =?UTF-8?q?Mobile=20responsive=20layout=20=E2=80=94=20bott?=
 =?UTF-8?q?om=20nav=20+=20table=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hide sidebar on mobile (≤640px), show fixed bottom nav bar instead
- Cards get overflow-x: auto so wide tables scroll horizontally
- Summary grid forces 2-column on mobile
- Reduce content padding to 12px, clear 68px for bottom nav
- Summary card values shrink to 18px on mobile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/App.tsx   | 17 +++++++++++-
 frontend/src/index.css | 63 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 33e20e0..b3dd6a3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -28,6 +28,8 @@ function Shell() {
 
   const hotelName = import.meta.env.VITE_HOTEL_NAME || 'Hotel'
 
+  const visibleNav = NAV.filter(n => !n.cap || can(user, n.cap))
+
   return (
     <div className="app-shell">
       <nav className="sidebar">
@@ -36,7 +38,7 @@ function Shell() {
           Wage Costs
         </div>
         <div className="sidebar-nav">
-          {NAV.filter(n => !n.cap || can(user, n.cap)).map(n => (
+          {visibleNav.map(n => (
             <div
               key={n.id}
               className={`nav-item${page === n.id ? ' active' : ''}`}
@@ -60,6 +62,19 @@ function Shell() {
         {page === 'budgets'        && <Budgets />}
         {page === 'settings'       && <SettingsPage />}
       </main>
+
+      <nav className="bottom-nav">
+        {visibleNav.map(n => (
+          <div
+            key={n.id}
+            className={`bottom-nav-item${page === n.id ? ' active' : ''}`}
+            onClick={() => setPage(n.id)}
+          >
+            <n.icon size={18} strokeWidth={1.75} />
+            <span>{n.label}</span>
+          </div>
+        ))}
+      </nav>
     </div>
   )
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 903eb99..c9cbc2a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -390,3 +390,66 @@ input[type="text"]:focus {
   color: var(--text-muted);
   font-size: 14px;
 }
+
+/* ── Bottom nav (mobile only) ───────────────────────────────────── */
+.bottom-nav {
+  display: none;
+  position: fixed;
+  bottom: 0; left: 0; right: 0;
+  background: var(--navy);
+  border-top: 1px solid rgba(255,255,255,0.1);
+  z-index: 200;
+  height: 58px;
+  justify-content: space-around;
+  align-items: stretch;
+}
+
+.bottom-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  color: rgba(255,255,255,0.45);
+  font-size: 10px;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+  padding: 4px 2px;
+  transition: color 0.15s;
+  user-select: none;
+}
+
+.bottom-nav-item.active { color: var(--gold); }
+.bottom-nav-item:hover  { color: rgba(255,255,255,0.85); }
+
+/* ── Mobile breakpoint ──────────────────────────────────────────── */
+@media (max-width: 640px) {
+  .sidebar     { display: none; }
+  .bottom-nav  { display: flex; }
+
+  .content {
+    padding: 12px;
+    padding-bottom: 68px; /* clear bottom nav */
+  }
+
+  .card {
+    padding: 12px;
+    overflow-x: auto;
+  }
+
+  .summary-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    margin-bottom: 14px;
+  }
+
+  .summary-card .value { font-size: 18px; }
+
+  .page-title  { font-size: 17px; }
+
+  .period-label {
+    font-size: 12px;
+    min-width: 110px;
+  }
+}