indifferentketchup/boocode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): hide Split button + single-pane navigator chrome

Browse Source 
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>
This commit is contained in:
indifferentketchup
2026-05-16 06:36:03 +00:00
parent 6a9fe187bd
commit f6c7e12dbf
1 changed files with 30 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
apps/web/src/components/Workspace.tsx
View File

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