From 707d83525b992aa6e6f99ee64fe5928ab8a729a1 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Wed, 4 Mar 2026 16:46:40 -0800
Subject: [PATCH] fix: responsive header dropdowns + space switcher on all
 pages

- Remove overflow:hidden from header__left on mobile (was clipping
  app-switcher and space-switcher triggers)
- Add white-space/overflow/text-overflow to both trigger buttons so
  they truncate gracefully on narrow screens
- Add <rstack-space-switcher> to module landing and sub-page info
  shells so the spaces dropdown always appears next to the rApps dropdown

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 server/shell.ts                            | 2 ++
 shared/components/rstack-app-switcher.ts   | 2 ++
 shared/components/rstack-space-switcher.ts | 1 +
 website/public/shell.css                   | 3 +--
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/server/shell.ts b/server/shell.ts
index 50fdf94..6913892 100644
--- a/server/shell.ts
+++ b/server/shell.ts
@@ -796,6 +796,7 @@ export function renderModuleLanding(opts: ModuleLandingOptions): string {
     <div class="rstack-header__left">
       <a href="/" style="display:flex;align-items:center;margin-right:4px"><img src="/favicon.png" alt="rSpace" class="rstack-header__logo"></a>
       <rstack-app-switcher current="${escapeAttr(mod.id)}"></rstack-app-switcher>
+      <rstack-space-switcher current="" name="Spaces"></rstack-space-switcher>
       <a class="rstack-header__demo-btn" href="${demoUrl}">Try Demo</a>
     </div>
     <div class="rstack-header__center">
@@ -1129,6 +1130,7 @@ export function renderSubPageInfo(opts: SubPageInfoOptions): string {
     <div class="rstack-header__left">
       <a href="/" style="display:flex;align-items:center;margin-right:4px"><img src="/favicon.png" alt="rSpace" class="rstack-header__logo"></a>
       <rstack-app-switcher current="${escapeAttr(mod.id)}"></rstack-app-switcher>
+      <rstack-space-switcher current="" name="Spaces"></rstack-space-switcher>
       <a class="rstack-header__demo-btn" href="${demoUrl}">Try Demo</a>
     </div>
     <div class="rstack-header__center">
diff --git a/shared/components/rstack-app-switcher.ts b/shared/components/rstack-app-switcher.ts
index 232b6b7..2424344 100644
--- a/shared/components/rstack-app-switcher.ts
+++ b/shared/components/rstack-app-switcher.ts
@@ -310,6 +310,8 @@ const STYLES = `
   font-size: 0.9rem; font-weight: 600; cursor: pointer;
   transition: background 0.15s;
   background: var(--rs-btn-secondary-bg); color: var(--rs-text-primary);
+  white-space: nowrap; min-width: 0; flex-shrink: 1;
+  overflow: hidden; text-overflow: ellipsis;
 }
 .trigger:hover { background: var(--rs-bg-hover); }
 
diff --git a/shared/components/rstack-space-switcher.ts b/shared/components/rstack-space-switcher.ts
index 0469f9e..e087e85 100644
--- a/shared/components/rstack-space-switcher.ts
+++ b/shared/components/rstack-space-switcher.ts
@@ -938,6 +938,7 @@ const STYLES = `
   font-size: 0.9rem; font-weight: 600; cursor: pointer;
   transition: background 0.15s;
   background: var(--rs-btn-secondary-bg); color: var(--rs-text-primary);
+  white-space: nowrap; min-width: 0; flex-shrink: 1;
 }
 .trigger:hover { background: var(--rs-bg-hover); }
 .space-name { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
diff --git a/website/public/shell.css b/website/public/shell.css
index 2098044..fb3bf3c 100644
--- a/website/public/shell.css
+++ b/website/public/shell.css
@@ -336,9 +336,8 @@ body.rstack-sidebar-open #toolbar {
     gap: 0;
   }
   .rstack-header__left {
-    flex: 0 1 auto;
+    flex: 1 1 0;
     min-width: 0;
-    overflow: hidden;
     gap: 2px;
   }
   .rstack-header__center {