From f6c7e12dbf4a74759b43c53e5cbc0db23178a47a Mon Sep 17 00:00:00 2001
From: indifferentketchup <samkintop@gmail.com>
Date: Sat, 16 May 2026 06:36:03 +0000
Subject: [PATCH] fix(mobile): hide Split button + single-pane navigator chrome
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

v1.6 left the Workspace's Split-button row visible on mobile even
when only one pane was open — ~36px of dead chrome above the chat.
Wrap the entire Split-row in !isMobile so mobile gets header → chat
with no intermediate strip. The existing mobile pane-navigator strip
(gated to panes.length > 1) is unchanged and still appears once a
second pane is created via the long-press "New chat" menu item (G3).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/Workspace.tsx | 58 ++++++++++++++-------------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/components/Workspace.tsx b/apps/web/src/components/Workspace.tsx
index 10a77ab..cf92dc7 100644
--- a/apps/web/src/components/Workspace.tsx
+++ b/apps/web/src/components/Workspace.tsx
@@ -125,34 +125,36 @@ export function Workspace({ sessionId, projectId }: Props) {
 
   return (
     <div className="flex flex-col h-full min-h-0">
-      <div className="flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 shrink-0">
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              disabled={panes.length >= MAX_PANES}
-              className={cn(
-                'flex items-center gap-1 text-xs px-2 py-1 rounded hover:bg-muted max-md:min-h-[44px] max-md:px-3',
-                panes.length >= MAX_PANES && 'opacity-40 cursor-not-allowed hover:bg-transparent'
-              )}
-            >
-              <PanelRight size={14} />
-              Split
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem onSelect={() => addSplitPane('chat')}>
-              <MessageSquare size={14} /> Chat
-            </DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => addSplitPane('terminal')}>
-              <Terminal size={14} /> Terminal
-            </DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => addSplitPane('agent')}>
-              <Bot size={14} /> Agent
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
+      {!isMobile && (
+        <div className="flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 shrink-0">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                disabled={panes.length >= MAX_PANES}
+                className={cn(
+                  'flex items-center gap-1 text-xs px-2 py-1 rounded hover:bg-muted',
+                  panes.length >= MAX_PANES && 'opacity-40 cursor-not-allowed hover:bg-transparent'
+                )}
+              >
+                <PanelRight size={14} />
+                Split
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem onSelect={() => addSplitPane('chat')}>
+                <MessageSquare size={14} /> Chat
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => addSplitPane('terminal')}>
+                <Terminal size={14} /> Terminal
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => addSplitPane('agent')}>
+                <Bot size={14} /> Agent
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
 
       {isMobile && panes.length > 1 && (
         <div className="flex items-center gap-1 overflow-x-auto border-b border-border bg-muted/10 px-2 py-1 shrink-0">