From e3c5d734bad8df9e2e58956aac687ce818ac2b2a Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@coder.com>
Date: Mon, 2 Mar 2026 16:16:09 -0500
Subject: [PATCH] fix(site): move gradient mask below title bar in agent detail
 (#22515)

The gradient mask overlay was positioned at the top of the parent
container (`absolute top-0`), causing it to overlap the title bar
instead of fading the scroll content beneath it.

**Changes:**
- Wrap the TopBar, archived banner, and gradient in a `relative z-10
shrink-0 overflow-visible` container
- Change the gradient from `top-0` to `top-full` so it anchors to the
bottom of the title bar and fades downward over the message area
---
 site/src/pages/AgentsPage/AgentDetail.tsx | 80 ++++++++++++-----------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/site/src/pages/AgentsPage/AgentDetail.tsx b/site/src/pages/AgentsPage/AgentDetail.tsx
index 26e605c980..03988447d8 100644
--- a/site/src/pages/AgentsPage/AgentDetail.tsx
+++ b/site/src/pages/AgentsPage/AgentDetail.tsx
@@ -966,45 +966,47 @@ const AgentDetail: FC = () => {
 			)}
 		>
 			<div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
-				<AgentDetailTopBar
-					chatTitle={chatTitle}
-					parentChat={parentChat}
-					onOpenParentChat={(chatId) => navigate(`/agents/${chatId}`)}
-					diff={{
-						hasDiffStatus,
-						diffStatus: diffStatusQuery.data,
-						showDiffPanel,
-						onToggleFilesChanged: () => setShowDiffPanel((prev) => !prev),
-					}}
-					workspace={{
-						canOpenEditors,
-						canOpenWorkspace,
-						onOpenInEditor: (editor) => {
-							void handleOpenInEditor(editor);
-						},
-						onViewWorkspace: handleViewWorkspace,
-					}}
-					onArchiveAgent={handleArchiveAgentAction}
-					isArchived={isArchived}
-					isSidebarCollapsed={isSidebarCollapsed}
-					onToggleSidebarCollapsed={onToggleSidebarCollapsed}
-				/>
-				{isArchived && (
-					<div className="flex shrink-0 items-center gap-2 border-b border-border-default bg-surface-secondary px-4 py-2 text-sm text-content-secondary">
-						<ArchiveIcon className="h-4 w-4 shrink-0" />
-						This agent has been archived and is read-only.
-					</div>
-				)}
-				<div
-					aria-hidden
-					className="pointer-events-none absolute inset-x-0 top-0 z-10 h-6 bg-surface-primary"
-					style={{
-						maskImage:
-							"linear-gradient(to bottom, black 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 70%, transparent 100%)",
-						WebkitMaskImage:
-							"linear-gradient(to bottom, black 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 70%, transparent 100%)",
-					}}
-				/>
+				<div className="relative z-10 shrink-0 overflow-visible">
+					<AgentDetailTopBar
+						chatTitle={chatTitle}
+						parentChat={parentChat}
+						onOpenParentChat={(chatId) => navigate(`/agents/${chatId}`)}
+						diff={{
+							hasDiffStatus,
+							diffStatus: diffStatusQuery.data,
+							showDiffPanel,
+							onToggleFilesChanged: () => setShowDiffPanel((prev) => !prev),
+						}}
+						workspace={{
+							canOpenEditors,
+							canOpenWorkspace,
+							onOpenInEditor: (editor) => {
+								void handleOpenInEditor(editor);
+							},
+							onViewWorkspace: handleViewWorkspace,
+						}}
+						onArchiveAgent={handleArchiveAgentAction}
+						isArchived={isArchived}
+						isSidebarCollapsed={isSidebarCollapsed}
+						onToggleSidebarCollapsed={onToggleSidebarCollapsed}
+					/>
+					{isArchived && (
+						<div className="flex shrink-0 items-center gap-2 border-b border-border-default bg-surface-secondary px-4 py-2 text-sm text-content-secondary">
+							<ArchiveIcon className="h-4 w-4 shrink-0" />
+							This agent has been archived and is read-only.
+						</div>
+					)}
+					<div
+						aria-hidden
+						className="pointer-events-none absolute inset-x-0 top-full z-10 h-6 bg-surface-primary"
+						style={{
+							maskImage:
+								"linear-gradient(to bottom, black 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 70%, transparent 100%)",
+							WebkitMaskImage:
+								"linear-gradient(to bottom, black 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 70%, transparent 100%)",
+						}}
+					/>
+				</div>
 				<div
 					ref={scrollContainerRef}
 					className="flex h-full flex-col-reverse overflow-y-auto [scrollbar-width:thin] [scrollbar-color:hsl(var(--surface-quaternary))_transparent]"