From 92ec121ce75eac1033bc49bd6c1f8a967924c746 Mon Sep 17 00:00:00 2001
From: arkon <arkon.85@hotmail.com>
Date: Sat, 31 Jan 2026 08:19:41 +0100
Subject: [PATCH] feat: fixed floating tabs on mobile - header stays at top
 when scrolling

---
 CLAUDE.md                 |  2 +-
 package.json              |  2 +-
 src/web/public/styles.css | 60 ++++++++++++++++++++++++++++++++-------
 3 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 8aa38eb0..f5cc7521 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -16,7 +16,7 @@ When user says "COM":
 1. Increment version in BOTH `package.json` AND `CLAUDE.md`
 2. Run: `git add -A && git commit -m "chore: bump version to X.XXXX" && git push && npm run build && systemctl --user restart claudeman-web`
 
-**Version**: 0.1455 (must match `package.json`)
+**Version**: 0.1456 (must match `package.json`)
 
 ## Project Overview
 
diff --git a/package.json b/package.json
index ffa25890..cdd8795a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "claudeman",
-  "version": "0.1455",
+  "version": "0.1456",
   "description": "The missing control plane for Claude Code - run 20 autonomous agents with real-time monitoring and session persistence",
   "type": "module",
   "main": "dist/index.js",
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 160f23fb..a81aa590 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -7790,13 +7790,36 @@ kbd {
    Tablet Breakpoint (430px - 768px)
    ============================================================================ */
 @media (max-width: 768px) and (min-width: 430px) {
-  /* Compact header for tablet - includes safe area padding */
+  /* Compact header for tablet - fixed at top, includes safe area padding */
   .header {
-    min-height: 44px;
-    max-height: 64px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    min-height: 48px;
+    max-height: 48px;
     padding: 0.35rem 0.5rem;
     padding-left: calc(0.5rem + var(--safe-area-left));
     padding-right: calc(0.5rem + var(--safe-area-right));
+    background: #0a0a0a;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    z-index: 200;
+  }
+
+  /* iOS safe area adjustment for fixed header - header extends into notch area */
+  .ios-device .header {
+    padding-top: calc(0.35rem + var(--safe-area-top));
+    min-height: calc(48px + var(--safe-area-top));
+    max-height: calc(48px + var(--safe-area-top));
+  }
+
+  /* Add top margin to main content to account for fixed header */
+  .main {
+    margin-top: 48px;
+  }
+
+  .ios-device .main {
+    margin-top: calc(48px + var(--safe-area-top));
   }
 
   /* Hide some header elements on tablet for more space */
@@ -7885,11 +7908,6 @@ kbd {
    Phone Breakpoint (<430px)
    ============================================================================ */
 @media (max-width: 430px) {
-  /* iOS safe area - only top padding on app, sides go to header/toolbar */
-  .ios-device .app {
-    padding-top: var(--safe-area-top);
-  }
-
   /* Hide header brand on phones */
   .header-brand {
     display: none;
@@ -7910,18 +7928,38 @@ kbd {
     display: none;
   }
 
-  /* Ultra-compact header for mobile */
+  /* Ultra-compact header for mobile - fixed at top */
   .header {
-    min-height: 32px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    min-height: 36px;
     max-height: 36px;
     padding: 0.15rem 0.3rem;
     padding-left: calc(0.3rem + var(--safe-area-left));
     padding-right: calc(0.3rem + var(--safe-area-right));
     gap: 0.15rem;
-    flex-shrink: 0;
     overflow: hidden;
     background: #0a0a0a;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    z-index: 200;
+  }
+
+  /* iOS safe area adjustment for fixed header - header extends into notch area */
+  .ios-device .header {
+    padding-top: calc(0.15rem + var(--safe-area-top));
+    min-height: calc(36px + var(--safe-area-top));
+    max-height: calc(36px + var(--safe-area-top));
+  }
+
+  /* Add top margin to main content to account for fixed header */
+  .main {
+    margin-top: 36px;
+  }
+
+  .ios-device .main {
+    margin-top: calc(36px + var(--safe-area-top));
   }
 
   .header-right {