From 367b5af1734249cbab71c31acc56c657bcd0ea59 Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Tue, 24 Mar 2026 22:22:59 +0000
Subject: [PATCH] fix(site): prevent phantom scrollbar on empty agent settings
 textareas (#23530)

---
 .../AgentsPage/AgentSettingsPageView.tsx      | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/AgentsPage/AgentSettingsPageView.tsx b/site/src/pages/AgentsPage/AgentSettingsPageView.tsx
index 067cdb829c..bab07bcdbe 100644
--- a/site/src/pages/AgentsPage/AgentSettingsPageView.tsx
+++ b/site/src/pages/AgentsPage/AgentSettingsPageView.tsx
@@ -28,6 +28,7 @@ import {
 import { useSearchParams } from "react-router";
 import TextareaAutosize from "react-textarea-autosize";
 import { formatTokenCount } from "utils/analytics";
+import { cn } from "utils/cn";
 import { formatCostMicros } from "utils/currency";
 import { AvatarData } from "#/components/Avatar/AvatarData";
 import { Button } from "#/components/Button/Button";
@@ -488,8 +489,10 @@ const UsageContent: FC<UsageContentProps> = ({ now }) => {
 	);
 };
 
-const textareaClassName =
-	"max-h-[240px] w-full resize-none overflow-y-auto rounded-lg border border-border bg-surface-primary px-4 py-3 font-sans text-[13px] leading-relaxed text-content-primary placeholder:text-content-secondary focus:outline-none focus:ring-2 focus:ring-content-link/30 [scrollbar-width:thin]";
+const textareaMaxHeight = 240;
+const textareaBaseClassName =
+	"max-h-[240px] w-full resize-none rounded-lg border border-border bg-surface-primary px-4 py-3 font-sans text-[13px] leading-relaxed text-content-primary placeholder:text-content-secondary focus:outline-none focus:ring-2 focus:ring-content-link/30";
+const textareaOverflowClassName = "overflow-y-auto [scrollbar-width:thin]";
 
 interface AgentSettingsPageViewProps {
 	activeSection: string;
@@ -548,6 +551,10 @@ export const AgentSettingsPageView: FC<AgentSettingsPageViewProps> = ({
 	const [localUserEdit, setLocalUserEdit] = useState<string | null>(null);
 	const userPromptDraft = localUserEdit ?? serverUserPrompt;
 
+	const [isUserPromptOverflowing, setIsUserPromptOverflowing] = useState(false);
+	const [isSystemPromptOverflowing, setIsSystemPromptOverflowing] =
+		useState(false);
+
 	const isSystemPromptDirty = localEdit !== null && localEdit !== serverPrompt;
 	const isUserPromptDirty =
 		localUserEdit !== null && localUserEdit !== serverUserPrompt;
@@ -642,10 +649,16 @@ export const AgentSettingsPageView: FC<AgentSettingsPageViewProps> = ({
 								Applied to all your chats. Only visible to you.
 							</p>
 							<TextareaAutosize
-								className={textareaClassName}
+								className={cn(
+									textareaBaseClassName,
+									isUserPromptOverflowing && textareaOverflowClassName,
+								)}
 								placeholder="Additional behavior, style, and tone preferences"
 								value={userPromptDraft}
 								onChange={(event) => setLocalUserEdit(event.target.value)}
+								onHeightChange={(height) =>
+									setIsUserPromptOverflowing(height >= textareaMaxHeight)
+								}
 								disabled={isPromptSaving}
 								minRows={1}
 							/>
@@ -700,10 +713,16 @@ export const AgentSettingsPageView: FC<AgentSettingsPageViewProps> = ({
 										built-in default is used.
 									</p>
 									<TextareaAutosize
-										className={textareaClassName}
+										className={cn(
+											textareaBaseClassName,
+											isSystemPromptOverflowing && textareaOverflowClassName,
+										)}
 										placeholder="Additional behavior, style, and tone preferences for all users"
 										value={systemPromptDraft}
 										onChange={(event) => setLocalEdit(event.target.value)}
+										onHeightChange={(height) =>
+											setIsSystemPromptOverflowing(height >= textareaMaxHeight)
+										}
 										disabled={isPromptSaving}
 										minRows={1}
 									/>