From 477d6d0cde7d9c2d3851d922d1ef07c92caa7df6 Mon Sep 17 00:00:00 2001
From: Hugo Dutka <hugo@coder.com>
Date: Wed, 8 Apr 2026 20:01:59 +0200
Subject: [PATCH] fix(site): fix agents right panel layout on small landscape
 viewports (#24161)

Currently, when you're using Agents on mobile with a vertical viewport
and you open the sidebar, the sidebar takes up the entire screen. That's
great, since there isn't enough space to show the other tabs. But when
you tilt your phone to horizontal mode, all 3 tabs show up, and none of
them are very legible:


https://github.com/user-attachments/assets/50a54791-fe53-4a5d-ba7b-85e82f970851

This PR makes it so that the right sidebar takes up the entire screen on
small viewports (<1024px) in horizontal mode too.



https://github.com/user-attachments/assets/a06069df-9f2f-42bd-8072-a237434434e5
---
 site/src/pages/AgentsPage/AgentChatPageView.tsx       |  2 +-
 site/src/pages/AgentsPage/components/ChatTopBar.tsx   |  2 +-
 .../AgentsPage/components/RightPanel/RightPanel.tsx   | 11 ++++-------
 .../AgentsPage/components/Sidebar/SidebarTabView.tsx  |  8 ++++----
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/site/src/pages/AgentsPage/AgentChatPageView.tsx b/site/src/pages/AgentsPage/AgentChatPageView.tsx
index 06f401b374..5ace5691e4 100644
--- a/site/src/pages/AgentsPage/AgentChatPageView.tsx
+++ b/site/src/pages/AgentsPage/AgentChatPageView.tsx
@@ -319,7 +319,7 @@ export const AgentChatPageView: FC<AgentChatPageViewProps> = ({
 					className={cn(
 						"relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
 						visualExpanded && "hidden",
-						shouldShowSidebar && "max-md:hidden",
+						shouldShowSidebar && "max-lg:hidden",
 					)}
 				>
 					<div className="relative z-10 shrink-0 overflow-visible">
diff --git a/site/src/pages/AgentsPage/components/ChatTopBar.tsx b/site/src/pages/AgentsPage/components/ChatTopBar.tsx
index a4579ae749..297e78796e 100644
--- a/site/src/pages/AgentsPage/components/ChatTopBar.tsx
+++ b/site/src/pages/AgentsPage/components/ChatTopBar.tsx
@@ -172,7 +172,7 @@ export const ChatTopBar: FC<ChatTopBarProps> = ({
 					rel="noreferrer"
 					className={cn(
 						"inline-flex shrink-0 items-center gap-1.5 rounded-md border border-solid border-border-default px-2 py-0.5 text-xs font-medium text-content-secondary no-underline transition-colors hover:bg-surface-secondary hover:text-content-primary",
-						panel.showSidebarPanel && "md:hidden",
+						panel.showSidebarPanel && "lg:hidden",
 					)}
 				>
 					<PrStateIcon
diff --git a/site/src/pages/AgentsPage/components/RightPanel/RightPanel.tsx b/site/src/pages/AgentsPage/components/RightPanel/RightPanel.tsx
index 526e2868f3..a76e8806d3 100644
--- a/site/src/pages/AgentsPage/components/RightPanel/RightPanel.tsx
+++ b/site/src/pages/AgentsPage/components/RightPanel/RightPanel.tsx
@@ -236,12 +236,9 @@ export const RightPanel = ({
 			className={cn(
 				visualExpanded
 					? "absolute inset-0 z-30 flex flex-col"
-					: cn(
-							"relative min-h-0 min-w-0",
-							visualOpen
-								? "flex h-full w-[100vw] min-w-0 flex-col border-0 border-solid border-border-default md:border-l md:w-[var(--panel-width)] md:min-w-[360px] md:max-w-[70vw]"
-								: "hidden",
-						),
+					: visualOpen
+						? "fixed inset-0 z-30 flex flex-col bg-surface-primary lg:relative lg:inset-auto lg:z-auto lg:h-full lg:min-h-0 lg:border-l lg:border-solid lg:border-border-default lg:w-[var(--panel-width)] lg:min-w-[360px] lg:max-w-[70vw]"
+						: "relative min-h-0 min-w-0 hidden",
 			)}
 		>
 			{/* Drag handle (sm+, on the left edge of the panel) */}
@@ -250,7 +247,7 @@ export const RightPanel = ({
 				onPointerMove={handlePointerMove}
 				onPointerUp={handlePointerUp}
 				className={cn(
-					"absolute top-0 left-0 z-20 hidden h-full w-1 cursor-col-resize select-none transition-colors hover:bg-content-link md:block",
+					"absolute top-0 left-0 z-20 hidden h-full w-1 cursor-col-resize select-none transition-colors hover:bg-content-link lg:block",
 					visualExpanded && "-left-1",
 				)}
 			/>
diff --git a/site/src/pages/AgentsPage/components/Sidebar/SidebarTabView.tsx b/site/src/pages/AgentsPage/components/Sidebar/SidebarTabView.tsx
index 3341f41850..9c6d731c64 100644
--- a/site/src/pages/AgentsPage/components/Sidebar/SidebarTabView.tsx
+++ b/site/src/pages/AgentsPage/components/Sidebar/SidebarTabView.tsx
@@ -180,7 +180,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 							size="icon"
 							onClick={onClose}
 							aria-label="Close panel"
-							className="h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary md:hidden"
+							className="h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary lg:hidden"
 						>
 							<XIcon />
 						</Button>
@@ -190,7 +190,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 						size="icon"
 						onClick={onToggleExpanded}
 						aria-label={isExpanded ? "Collapse panel" : "Expand panel"}
-						className="hidden h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary md:inline-flex"
+						className="hidden h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary lg:inline-flex"
 					>
 						{isExpanded ? <MinimizeIcon /> : <MaximizeIcon />}
 					</Button>
@@ -314,7 +314,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 						size="icon"
 						onClick={onClose}
 						aria-label="Close panel"
-						className="h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary md:hidden"
+						className="h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary lg:hidden"
 					>
 						<XIcon />
 					</Button>
@@ -324,7 +324,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 					size="icon"
 					onClick={onToggleExpanded}
 					aria-label={isExpanded ? "Collapse panel" : "Expand panel"}
-					className="hidden h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary md:inline-flex"
+					className="hidden h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary lg:inline-flex"
 				>
 					{isExpanded ? <MinimizeIcon /> : <MaximizeIcon />}
 				</Button>