From 39ec8ce41bc135fc29ba17bd481ab70afb2919b1 Mon Sep 17 00:00:00 2001 From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com> Date: Sat, 17 Jan 2026 09:22:11 +0000 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=A4=96=20fix:=20prevent=20mobile=20he?= =?UTF-8?q?ader=20scroll=20on=20keyboard=20open?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/browser/App.tsx | 6 +++--- src/browser/components/ChatPane.tsx | 4 ++-- src/browser/components/LeftSidebar.tsx | 2 +- src/browser/components/LoadingScreen.tsx | 2 +- src/browser/components/WorkspaceShell.tsx | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/browser/App.tsx b/src/browser/App.tsx index b06870061a..d8d7dd1ab3 100644 --- a/src/browser/App.tsx +++ b/src/browser/App.tsx @@ -635,7 +635,7 @@ function AppInner() { return ( <> -
+
-
+
-
+
{selectedWorkspace ? ( (() => { const currentMetadata = workspaceMetadata.get(selectedWorkspace.workspaceId); diff --git a/src/browser/components/ChatPane.tsx b/src/browser/components/ChatPane.tsx index 086ac47693..a83824a1c7 100644 --- a/src/browser/components/ChatPane.tsx +++ b/src/browser/components/ChatPane.tsx @@ -509,7 +509,7 @@ export const ChatPane: React.FC = (props) => { return (
= (props) => { onOpenTerminal={onOpenTerminal} /> -
+
+

Loading workspaces...

diff --git a/src/browser/components/WorkspaceShell.tsx b/src/browser/components/WorkspaceShell.tsx index 18fbe03412..2598bec10c 100644 --- a/src/browser/components/WorkspaceShell.tsx +++ b/src/browser/components/WorkspaceShell.tsx @@ -32,7 +32,7 @@ const WorkspacePlaceholder: React.FC<{ }> = (props) => (
= (props) => { return (
Date: Mon, 19 Jan 2026 12:09:54 +0000 Subject: [PATCH 2/4] fix: respect iOS safe area for workspace header --- src/browser/components/WorkspaceHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/components/WorkspaceHeader.tsx b/src/browser/components/WorkspaceHeader.tsx index 2c67ee933e..e81bbc241e 100644 --- a/src/browser/components/WorkspaceHeader.tsx +++ b/src/browser/components/WorkspaceHeader.tsx @@ -111,7 +111,7 @@ export const WorkspaceHeader: React.FC = ({ style={headerRightPadding > 0 ? { paddingRight: headerRightPadding } : undefined} data-testid="workspace-header" className={cn( - "bg-sidebar border-border-light flex items-center justify-between border-b px-[15px] [@media(max-width:768px)]:h-auto [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2 [@media(max-width:768px)]:py-2", + "bg-sidebar border-border-light flex items-center justify-between border-b px-[15px] [@media(max-width:768px)]:sticky [@media(max-width:768px)]:top-0 [@media(max-width:768px)]:z-10 [@media(max-width:768px)]:h-auto [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2 [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pt-[calc(env(safe-area-inset-top,0px)+0.5rem)]", isDesktop ? DESKTOP_TITLEBAR_HEIGHT_CLASS : "h-8", // In desktop mode, make header draggable for window movement isDesktop && "titlebar-drag" From c7a13ccd9618f298019bb2d3b31eadbaf4adb444 Mon Sep 17 00:00:00 2001 From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com> Date: Mon, 19 Jan 2026 16:55:13 +0000 Subject: [PATCH 3/4] fix: use slideover right sidebar on mobile --- src/browser/components/RightSidebar.tsx | 99 ++++++++++++---------- src/browser/components/WorkspaceHeader.tsx | 26 ++++-- src/browser/styles/globals.css | 23 +++++ 3 files changed, 98 insertions(+), 50 deletions(-) diff --git a/src/browser/components/RightSidebar.tsx b/src/browser/components/RightSidebar.tsx index 72fb3d98b9..d8b6dd62e8 100644 --- a/src/browser/components/RightSidebar.tsx +++ b/src/browser/components/RightSidebar.tsx @@ -126,12 +126,10 @@ const SidebarContainer: React.FC = ({ return (
= ({ }; return ( - - - {!collapsed && ( -
- {/* Resize handle (left edge) */} - {onStartResize && ( -
onStartResize(e as unknown as React.MouseEvent)} - /> - )} - -
- {renderLayoutNode(layout.root)} -
-
+ <> + {/* Overlay backdrop - only visible on mobile when sidebar is open */} +
setCollapsed(true)} + /> - + setCollapsed(!collapsed)} - side="right" - /> - + isResizing={isResizing} + isDesktop={isDesktopMode()} + customWidth={width} // Unified width from AIView (applies to all tabs) + role="complementary" + aria-label="Workspace insights" + > + {!collapsed && ( +
+ {/* Resize handle (left edge) */} + {onStartResize && ( +
onStartResize(e as unknown as React.MouseEvent)} + /> + )} - {/* Drag overlay - shows tab being dragged at cursor position */} - - {activeDragData ? ( -
- {getTabName(activeDragData.tab)} -
- ) : null} - - +
+ {renderLayoutNode(layout.root)} +
+
+ )} + + setCollapsed(!collapsed)} + side="right" + /> + + + {/* Drag overlay - shows tab being dragged at cursor position */} + + {activeDragData ? ( +
+ {getTabName(activeDragData.tab)} +
+ ) : null} + + + ); }; diff --git a/src/browser/components/WorkspaceHeader.tsx b/src/browser/components/WorkspaceHeader.tsx index e81bbc241e..2c62970939 100644 --- a/src/browser/components/WorkspaceHeader.tsx +++ b/src/browser/components/WorkspaceHeader.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useState } from "react"; -import { Menu, Pencil, Server } from "lucide-react"; +import { Menu, PanelRight, Pencil, Server } from "lucide-react"; import { CUSTOM_EVENTS } from "@/common/constants/events"; import { cn } from "@/common/lib/utils"; import { RIGHT_SIDEBAR_COLLAPSED_KEY } from "@/common/constants/storage"; @@ -58,10 +58,14 @@ export const WorkspaceHeader: React.FC = ({ const [debugLlmRequestOpen, setDebugLlmRequestOpen] = useState(false); const [mcpModalOpen, setMcpModalOpen] = useState(false); - const [rightSidebarCollapsed] = usePersistedState(RIGHT_SIDEBAR_COLLAPSED_KEY, false, { - // This state is toggled from RightSidebar, so we need cross-component updates. - listener: true, - }); + const [rightSidebarCollapsed, setRightSidebarCollapsed] = usePersistedState( + RIGHT_SIDEBAR_COLLAPSED_KEY, + false, + { + // This state is toggled from RightSidebar, so we need cross-component updates. + listener: true, + } + ); const handleOpenTerminal = useCallback(() => { if (onOpenTerminal) { @@ -156,6 +160,18 @@ export const WorkspaceHeader: React.FC = ({
+ {rightSidebarCollapsed && ( + + )} {editorError && {editorError}} diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css index c81f70e2be..7ffaa482f2 100644 --- a/src/browser/styles/globals.css +++ b/src/browser/styles/globals.css @@ -1053,6 +1053,29 @@ body, padding-left: env(safe-area-inset-left, 0px) !important; } + + /* Mobile right sidebar slideover positioning only on touch devices */ + .mobile-right-sidebar { + position: fixed !important; + right: 0 !important; + top: 0 !important; + bottom: 0 !important; + width: 100vw !important; + max-width: 100vw !important; + z-index: 1000 !important; + transition: transform 0.3s !important; + box-shadow: -2px 0 8px rgba(0, 0, 0, 0.5) !important; + + /* Account for iOS safe areas (the sidebar is position: fixed) */ + padding-top: env(safe-area-inset-top, 0px) !important; + padding-bottom: env(safe-area-inset-bottom, 0px) !important; + padding-right: env(safe-area-inset-right, 0px) !important; + } + + .mobile-right-sidebar-collapsed { + transform: translateX(100%) !important; + box-shadow: none !important; + } .mobile-sidebar-collapsed { transform: translateX(-100%) !important; box-shadow: none !important; From 935a15baa690e59eeb56663632095c522484d7b4 Mon Sep 17 00:00:00 2001 From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com> Date: Mon, 19 Jan 2026 17:12:14 +0000 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=A4=96=20fix:=20hide=20right=20sideba?= =?UTF-8?q?r=20on=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/browser/components/RightSidebar.tsx | 96 ++++++++++------------ src/browser/components/WorkspaceHeader.tsx | 26 ++---- src/browser/components/WorkspaceShell.tsx | 26 +++--- src/browser/styles/globals.css | 23 ------ 4 files changed, 61 insertions(+), 110 deletions(-) diff --git a/src/browser/components/RightSidebar.tsx b/src/browser/components/RightSidebar.tsx index d8b6dd62e8..501260ffb1 100644 --- a/src/browser/components/RightSidebar.tsx +++ b/src/browser/components/RightSidebar.tsx @@ -126,10 +126,9 @@ const SidebarContainer: React.FC = ({ return (
= ({ }; return ( - <> - {/* Overlay backdrop - only visible on mobile when sidebar is open */} -
+ + {!collapsed && ( +
+ {/* Resize handle (left edge) */} + {onStartResize && ( +
onStartResize(e as unknown as React.MouseEvent)} + /> + )} + +
+ {renderLayoutNode(layout.root)} +
+
)} - onClick={() => setCollapsed(true)} - /> - - - {!collapsed && ( -
- {/* Resize handle (left edge) */} - {onStartResize && ( -
onStartResize(e as unknown as React.MouseEvent)} - /> - )} - -
- {renderLayoutNode(layout.root)} -
-
- )} + onToggle={() => setCollapsed(!collapsed)} + side="right" + /> + - setCollapsed(!collapsed)} - side="right" - /> - - - {/* Drag overlay - shows tab being dragged at cursor position */} - - {activeDragData ? ( -
- {getTabName(activeDragData.tab)} -
- ) : null} - - - + {/* Drag overlay - shows tab being dragged at cursor position */} + + {activeDragData ? ( +
+ {getTabName(activeDragData.tab)} +
+ ) : null} + + ); }; diff --git a/src/browser/components/WorkspaceHeader.tsx b/src/browser/components/WorkspaceHeader.tsx index 2c62970939..e81bbc241e 100644 --- a/src/browser/components/WorkspaceHeader.tsx +++ b/src/browser/components/WorkspaceHeader.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useState } from "react"; -import { Menu, PanelRight, Pencil, Server } from "lucide-react"; +import { Menu, Pencil, Server } from "lucide-react"; import { CUSTOM_EVENTS } from "@/common/constants/events"; import { cn } from "@/common/lib/utils"; import { RIGHT_SIDEBAR_COLLAPSED_KEY } from "@/common/constants/storage"; @@ -58,14 +58,10 @@ export const WorkspaceHeader: React.FC = ({ const [debugLlmRequestOpen, setDebugLlmRequestOpen] = useState(false); const [mcpModalOpen, setMcpModalOpen] = useState(false); - const [rightSidebarCollapsed, setRightSidebarCollapsed] = usePersistedState( - RIGHT_SIDEBAR_COLLAPSED_KEY, - false, - { - // This state is toggled from RightSidebar, so we need cross-component updates. - listener: true, - } - ); + const [rightSidebarCollapsed] = usePersistedState(RIGHT_SIDEBAR_COLLAPSED_KEY, false, { + // This state is toggled from RightSidebar, so we need cross-component updates. + listener: true, + }); const handleOpenTerminal = useCallback(() => { if (onOpenTerminal) { @@ -160,18 +156,6 @@ export const WorkspaceHeader: React.FC = ({
- {rightSidebarCollapsed && ( - - )} {editorError && {editorError}} diff --git a/src/browser/components/WorkspaceShell.tsx b/src/browser/components/WorkspaceShell.tsx index 2598bec10c..dddba5a0c4 100644 --- a/src/browser/components/WorkspaceShell.tsx +++ b/src/browser/components/WorkspaceShell.tsx @@ -107,18 +107,20 @@ export const WorkspaceShell: React.FC = (props) => { onOpenTerminal={handleOpenTerminal} /> - +
+ +