From e55e56bc06c6863a63037870d8cf06d2cb56ab8f Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeff@jeffemmett.com>
Date: Sat, 28 Feb 2026 07:17:38 +0000
Subject: [PATCH] feat: move search bar to second row on mobile header

On screens <= 640px, the header wraps to two rows: logo/app-switcher
and identity on top, "Ask Mi Anything" search bar full-width below.
Header and tab row switch from fixed to sticky positioning on mobile,
eliminating the need for magic padding-top values on #app.

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

diff --git a/server/shell.ts b/server/shell.ts
index 7b01078..3ce98fa 100644
--- a/server/shell.ts
+++ b/server/shell.ts
@@ -54,7 +54,7 @@ export function renderShell(opts: ShellOptions): string {
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌌</text></svg>">
   <title>${escapeHtml(title)}</title>
-  <link rel="stylesheet" href="/shell.css?v=2">
+  <link rel="stylesheet" href="/shell.css?v=3">
   <style>
     /* When loaded inside an iframe (e.g. standalone domain redirecting back),
        hide the shell chrome — the parent rSpace page already provides it. */
@@ -461,7 +461,7 @@ export function renderModuleLanding(opts: ModuleLandingOptions): string {
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>${mod.icon}</text></svg>">
   <title>${escapeHtml(mod.name)} — rSpace</title>
-  <link rel="stylesheet" href="/shell.css?v=2">
+  <link rel="stylesheet" href="/shell.css?v=3">
   ${cssBlock}
   <script defer src="https://rdata.online/collect.js" data-website-id="6ee7917b-0ed7-44cb-a4c8-91037638526b"></script>
 </head>
diff --git a/website/public/shell.css b/website/public/shell.css
index 5bb5b9f..423cc55 100644
--- a/website/public/shell.css
+++ b/website/public/shell.css
@@ -232,11 +232,37 @@ body[data-theme="light"] {
 /* ── Mobile adjustments ── */
 
 @media (max-width: 640px) {
+  /* Switch header + tab row from fixed to sticky on mobile.
+     This avoids needing a magic padding-top on #app and lets
+     the header wrap naturally to two rows. */
   .rstack-header {
-    padding: 0 12px;
+    position: sticky;
+    padding: 6px 12px;
+    height: auto;
+    flex-wrap: wrap;
+    gap: 0;
+  }
+  .rstack-header__left {
+    flex: 1;
+    min-width: 0;
+  }
+  .rstack-header__center {
+    order: 3;
+    flex-basis: 100%;
+    padding: 4px 0 2px;
+    justify-content: stretch;
+  }
+  .rstack-header__right {
+    flex-shrink: 0;
+  }
+  .rstack-tab-row {
+    position: sticky;
   }
   #app {
-    padding-top: 82px;
+    padding-top: 0;
+  }
+  #app.canvas-layout {
+    padding-top: 0;
   }
   .rapp-nav {
     flex-wrap: wrap;
@@ -246,7 +272,6 @@ body[data-theme="light"] {
 
 @media (max-width: 480px) {
   #app {
-    padding-top: 78px;
     padding-left: 8px;
     padding-right: 8px;
   }