From 3608064600c76e6d30e36df5e5e62916da5bd182 Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@coder.com>
Date: Fri, 6 Mar 2026 17:08:12 -0800
Subject: [PATCH] fix: prevent agents right panel from covering chat on mobile
 (#22744)

---
 site/src/pages/AgentsPage/AgentDetail.tsx    |  7 ++--
 site/src/pages/AgentsPage/SidebarTabView.tsx | 37 +++++++++++++++-----
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/site/src/pages/AgentsPage/AgentDetail.tsx b/site/src/pages/AgentsPage/AgentDetail.tsx
index 96d3de6d62..1f28dd6122 100644
--- a/site/src/pages/AgentsPage/AgentDetail.tsx
+++ b/site/src/pages/AgentsPage/AgentDetail.tsx
@@ -622,7 +622,7 @@ const AgentDetail: FC = () => {
 	const [prevHasDiffStatus, setPrevHasDiffStatus] = useState(false);
 	if (hasDiffStatus !== prevHasDiffStatus) {
 		setPrevHasDiffStatus(hasDiffStatus);
-		if (hasDiffStatus) {
+		if (hasDiffStatus && !window.matchMedia("(max-width: 767px)").matches) {
 			setShowSidebarPanel(true);
 		}
 	}
@@ -717,7 +717,7 @@ const AgentDetail: FC = () => {
 	const hasGitRepos = gitWatcher.repositories.size > 0;
 	if (hasGitRepos !== prevHasGitRepos) {
 		setPrevHasGitRepos(hasGitRepos);
-		if (hasGitRepos) {
+		if (hasGitRepos && !window.matchMedia("(max-width: 767px)").matches) {
 			setShowSidebarPanel(true);
 		}
 	}
@@ -725,7 +725,6 @@ const AgentDetail: FC = () => {
 	// Extract PR number from diff status URL.
 	const prMatch = diffStatusQuery.data?.url?.match(/\/pull\/(\d+)/)?.[1];
 	const prNumber = prMatch ? Number(prMatch) : undefined;
-
 	useEffect(() => {
 		setSelectedModel((current) => {
 			if (current && modelOptions.some((model) => model.id === current)) {
@@ -1127,6 +1126,7 @@ const AgentDetail: FC = () => {
 				className={cn(
 					"relative flex min-h-0 min-w-0 flex-1 flex-col",
 					visualExpanded && "hidden",
+					shouldShowSidebar && "max-md:hidden",
 				)}
 			>
 				<div className="relative z-10 shrink-0 overflow-visible">
@@ -1247,6 +1247,7 @@ const AgentDetail: FC = () => {
 					}
 					onRefresh={gitWatcher.refresh}
 					onCommit={handleCommit}
+					onClose={() => setShowSidebarPanel(false)}
 					isExpanded={visualExpanded}
 					onToggleExpanded={() => setIsRightPanelExpanded((prev) => !prev)}
 					isSidebarCollapsed={isSidebarCollapsed}
diff --git a/site/src/pages/AgentsPage/SidebarTabView.tsx b/site/src/pages/AgentsPage/SidebarTabView.tsx
index 69e3cbcf15..fc2367baeb 100644
--- a/site/src/pages/AgentsPage/SidebarTabView.tsx
+++ b/site/src/pages/AgentsPage/SidebarTabView.tsx
@@ -9,6 +9,7 @@ import {
 	MinimizeIcon,
 	PanelLeftIcon,
 	Rows3Icon,
+	XIcon,
 } from "lucide-react";
 import {
 	type FC,
@@ -54,6 +55,8 @@ interface SidebarTabViewProps {
 	chatTitle?: string;
 	/** PR diff stats for the PR tab. */
 	diffStatus?: { additions?: number; deletions?: number };
+	/** Callback to close the panel (used on mobile). */
+	onClose?: () => void;
 }
 
 /** How far (px) each chevron click scrolls the tab strip. */
@@ -151,6 +154,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 	onToggleSidebarCollapsed,
 	chatTitle,
 	diffStatus,
+	onClose,
 }) => {
 	const tabIdPrefix = useId();
 	const repoEntries = Array.from(repositories.entries()).sort(([a], [b]) =>
@@ -216,12 +220,23 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 							</span>
 						)}
 					</div>
+					{onClose && (
+						<Button
+							variant="subtle"
+							size="icon"
+							onClick={onClose}
+							aria-label="Close panel"
+							className="h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary md:hidden"
+						>
+							<XIcon />
+						</Button>
+					)}
 					<Button
 						variant="subtle"
 						size="icon"
 						onClick={onToggleExpanded}
 						aria-label={isExpanded ? "Collapse panel" : "Expand panel"}
-						className="h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary"
+						className="hidden h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary md:inline-flex"
 					>
 						{isExpanded ? <MinimizeIcon /> : <MaximizeIcon />}
 					</Button>
@@ -252,7 +267,6 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 						<PanelLeftIcon />
 					</Button>
 				)}
-
 				{/* Scrollable tab strip with overlay chevrons */}
 				<div className="relative min-w-0 flex-1">
 					{tabScroll.canScrollLeft && (
@@ -327,7 +341,6 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 						</button>
 					)}
 				</div>
-
 				{/* Center: chat title when expanded */}
 				<div className="min-w-0 shrink-0 text-center">
 					{isExpanded && chatTitle && (
@@ -336,7 +349,6 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 						</span>
 					)}
 				</div>
-
 				{/* Diff style toggle */}
 				<div className="flex shrink-0 items-center gap-1">
 					<Button
@@ -364,19 +376,28 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 						<Columns2Icon className="!p-0 !size-3.5" />
 					</Button>
 				</div>
-
-				{/* Right side: expand/contract button */}
+				{/* Right side: close (mobile) / expand (desktop) */}
+				{onClose && (
+					<Button
+						variant="subtle"
+						size="icon"
+						onClick={onClose}
+						aria-label="Close panel"
+						className="h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary md:hidden"
+					>
+						<XIcon />
+					</Button>
+				)}
 				<Button
 					variant="subtle"
 					size="icon"
 					onClick={onToggleExpanded}
 					aria-label={isExpanded ? "Collapse panel" : "Expand panel"}
-					className="h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary"
+					className="hidden h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary md:inline-flex"
 				>
 					{isExpanded ? <MinimizeIcon /> : <MaximizeIcon />}
 				</Button>
 			</div>
-
 			{/* Tab content */}
 			<div
 				role="tabpanel"