From 5712faaa2ce528f47fa31a7d0528521374b443c0 Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@coder.com>
Date: Fri, 6 Mar 2026 12:11:08 -0800
Subject: [PATCH] fix: always open git panel from the right, full width on
 mobile (#22718)

On small viewports (below `xl`) the git/changes panel was expanding as a
bottom sheet. This changes it to always appear from the right side:

- **Mobile (<`sm`/640px):** Panel opens full-width (`w-[100vw]`) as a
right-side overlay
- **`sm`+ (640px+):** Panel uses the persisted width (`--panel-width`)
with min 360px / max 70vw, drag handle enabled
- Parent flex container is always `flex-row` instead of `flex-col
xl:flex-row`

### Changes
- `AgentDetail.tsx`: Removed `flex-col xl:flex-row` responsive switch,
always uses `flex-row`
- `RightPanel.tsx`: Replaced bottom-sheet layout (`h-[42dvh]`) with
right-side panel at all breakpoints. Full viewport width below `sm`,
resizable width at `sm`+. Drag handle activates at `sm` instead of `xl`.
---
 site/src/pages/AgentsPage/AgentDetail.tsx | 2 +-
 site/src/pages/AgentsPage/RightPanel.tsx  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/AgentsPage/AgentDetail.tsx b/site/src/pages/AgentsPage/AgentDetail.tsx
index af7506304b..4d4a6df512 100644
--- a/site/src/pages/AgentsPage/AgentDetail.tsx
+++ b/site/src/pages/AgentsPage/AgentDetail.tsx
@@ -1120,7 +1120,7 @@ const AgentDetail: FC = () => {
 		<div
 			className={cn(
 				"relative flex min-h-0 min-w-0 flex-1",
-				shouldShowSidebar && !visualExpanded && "flex-col xl:flex-row",
+				shouldShowSidebar && !visualExpanded && "flex-row",
 			)}
 		>
 			<div
diff --git a/site/src/pages/AgentsPage/RightPanel.tsx b/site/src/pages/AgentsPage/RightPanel.tsx
index e23b2cae26..53506da197 100644
--- a/site/src/pages/AgentsPage/RightPanel.tsx
+++ b/site/src/pages/AgentsPage/RightPanel.tsx
@@ -235,18 +235,18 @@ export const RightPanel = ({
 					: cn(
 							"relative min-h-0 min-w-0",
 							visualOpen
-								? "flex h-[42dvh] min-h-[260px] max-h-[56dvh] flex-col xl:h-auto xl:max-h-none xl:w-[var(--panel-width)] xl:min-w-[360px] xl:max-w-[70vw] xl:border-0 xl:border-l xl:border-solid xl:border-border-default"
+								? "flex h-full w-[100vw] min-w-0 flex-col border-0 border-l border-solid border-border-default sm:w-[var(--panel-width)] sm:min-w-[360px] sm:max-w-[70vw]"
 								: "hidden",
 						),
 			)}
 		>
-			{/* Drag handle (xl+ only, on the left edge of the panel) */}
+			{/* Drag handle (sm+, on the left edge of the panel) */}
 			<div
 				onPointerDown={handlePointerDown}
 				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 xl:block",
+					"absolute top-0 left-0 z-20 hidden h-full w-1 cursor-col-resize select-none transition-colors hover:bg-content-link sm:block",
 					visualExpanded && "-left-1",
 				)}
 			/>