From 5f63e51a2f85f3f196ba935dfd8e6aa020bc6a0c Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Thu, 12 Mar 2026 19:00:56 -0700
Subject: [PATCH] fix(shell): responsive subnav and tabbar on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tab row: set top: 0 on mobile (was inheriting top: 56px from desktop
  fixed positioning while being sticky on mobile)
- Subnav + tabbar: switch from sticky to relative on mobile so they
  scroll naturally instead of fighting with the sticky header
- Smaller pill padding/font on ≤480px screens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 server/shell.ts          | 20 ++++++++++++++++++--
 website/public/shell.css |  1 +
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/server/shell.ts b/server/shell.ts
index 3428471..38ec8df 100644
--- a/server/shell.ts
+++ b/server/shell.ts
@@ -1333,7 +1333,18 @@ const SUBNAV_CSS = `
 }
 .rapp-subnav::-webkit-scrollbar { display: none; }
 @media (max-width: 640px) {
-  .rapp-subnav { top: 0; }
+  .rapp-subnav {
+    position: relative;
+    top: auto;
+    padding: 0.375rem 0.75rem;
+    gap: 0.25rem;
+  }
+}
+@media (max-width: 480px) {
+  .rapp-nav-pill {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+  }
 }
 .rapp-nav-pill {
   padding: 0.3125rem 0.75rem;
@@ -1410,7 +1421,12 @@ const TABBAR_CSS = `
 }
 .rapp-tabbar::-webkit-scrollbar { display: none; }
 @media (max-width: 640px) {
-  .rapp-tabbar { top: 0; }
+  .rapp-tabbar {
+    position: relative;
+    top: auto;
+    padding: 0.25rem 0.75rem;
+    gap: 0.25rem;
+  }
 }
 `;
 
diff --git a/website/public/shell.css b/website/public/shell.css
index 9c075f0..6e67bb4 100644
--- a/website/public/shell.css
+++ b/website/public/shell.css
@@ -392,6 +392,7 @@ body.rstack-sidebar-open #toolbar {
   }
   .rstack-tab-row {
     position: sticky;
+    top: 0;
   }
   #app {
     padding-top: 0;