From ac791e5bd36a0a90293013e0dd93e31d2fbea740 Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@coder.com>
Date: Wed, 11 Mar 2026 07:31:37 -0700
Subject: [PATCH] fix(site): match Local tab scroll layout with Remote tab in
 Git panel (#22949)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Local tab in the Git panel wrapped all repo sections in a single
`ScrollArea`, which caused the file tree sidebar to scroll away with the
diff content instead of staying pinned. The Remote tab
(`FilesChangedPanel`) already uses the correct pattern where each
`DiffViewer` manages its own independent `ScrollArea` for the file tree
and diff list side-by-side.

## Changes

- Replace the outer `ScrollArea` in `LocalContent` with a flex column
container that gives each repo section a constrained height via
`min-h-0` and `flex-1`, allowing `DiffViewer`'s internal `ScrollArea`
components to activate properly
- Add `shrink-0` to `RepoHeader` so it stays pinned at the top of each
repo section
- Remove unused `ScrollArea` import

## Root cause

`LocalContent` wrapped everything in `<ScrollArea className="h-full">`,
creating a single scrollable container. Inside, each `RepoChangesPanel`
→ `DiffViewer` has `h-full` but since it was inside an already-scrolling
container, it never got a constrained height — so the inner `ScrollArea`
components for the file tree and diff list never activated. Everything
flowed in the outer scroll, making the file tree scroll away with the
content.
---
 site/src/pages/AgentsPage/GitPanel.tsx | 58 +++++++++++++-------------
 1 file changed, 28 insertions(+), 30 deletions(-)

diff --git a/site/src/pages/AgentsPage/GitPanel.tsx b/site/src/pages/AgentsPage/GitPanel.tsx
index 598c73d5bb..b391d72bdf 100644
--- a/site/src/pages/AgentsPage/GitPanel.tsx
+++ b/site/src/pages/AgentsPage/GitPanel.tsx
@@ -1,6 +1,5 @@
 import type { WorkspaceAgentRepoChanges } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
-import { ScrollArea } from "components/ScrollArea/ScrollArea";
 import {
 	CheckIcon,
 	ColumnsIcon,
@@ -276,35 +275,34 @@ const LocalContent: FC<{
 	}
 
 	return (
-		<ScrollArea className="h-full">
-			<div className="flex flex-col">
-				{repoEntries.map(([repoRoot, repo], index) => {
-					const showSeparator = index > 0;
+		<div className="flex h-full flex-col">
+			{repoEntries.map(([repoRoot, repo], index) => {
+				const showSeparator = index > 0;
 
-					return (
-						<section
-							key={repoRoot}
-							className={cn(
-								showSeparator &&
-									"border-0 border-t border-solid border-border-default",
-							)}
-						>
-							<RepoHeader
-								repoRoot={repoRoot}
-								repo={repo}
-								onRefresh={onRefresh}
-								onCommit={() => onCommit(repoRoot)}
-							/>
-							<RepoChangesPanel
-								repo={repo}
-								isExpanded={isExpanded}
-								diffStyle={diffStyle}
-							/>
-						</section>
-					);
-				})}
-			</div>
-		</ScrollArea>
+				return (
+					<section
+						key={repoRoot}
+						className={cn(
+							"flex min-h-0 flex-1 flex-col",
+							showSeparator &&
+								"border-0 border-t border-solid border-border-default",
+						)}
+					>
+						<RepoHeader
+							repoRoot={repoRoot}
+							repo={repo}
+							onRefresh={onRefresh}
+							onCommit={() => onCommit(repoRoot)}
+						/>
+						<RepoChangesPanel
+							repo={repo}
+							isExpanded={isExpanded}
+							diffStyle={diffStyle}
+						/>
+					</section>
+				);
+			})}
+		</div>
 	);
 };
 
@@ -329,7 +327,7 @@ const RepoHeader: FC<{
 	}, [onRefresh]);
 
 	return (
-		<div className="flex items-center gap-2 bg-surface-secondary px-3 py-2">
+		<div className="flex shrink-0 items-center gap-2 bg-surface-secondary px-3 py-2">
 			{/* Repo identity */}
 			<div className="flex min-w-0 flex-1 items-center gap-2">
 				<GitBranchIcon className="size-3.5 shrink-0 text-content-secondary" />