opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-22 21:22:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): prevent phantom scrollbar on empty agent settings textareas (#23530)

Browse Source
This commit is contained in:
Danielle Maywood
2026-03-24 22:22:59 +00:00
committed by GitHub
parent 9dc2e180a2
commit 367b5af173
1 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/AgentsPage/AgentSettingsPageView.tsx
+23 -4
View File
@@ -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}
/>