From 565cf846de96c8ad478d38a97aca4a6b2f535ff1 Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Sat, 28 Mar 2026 16:27:54 +0000
Subject: [PATCH] fix(site): fix exec tool layout shift on command expand
 (#23739)

---
 .../ai-elements/tool/ExecuteTool.tsx          | 20 ++++++++-----------
 .../ai-elements/tool/ProcessOutputTool.tsx    |  4 ++--
 .../AgentDetail/ConversationTimeline.tsx      |  2 +-
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/site/src/components/ai-elements/tool/ExecuteTool.tsx b/site/src/components/ai-elements/tool/ExecuteTool.tsx
index 50958ea80f..0016075b94 100644
--- a/site/src/components/ai-elements/tool/ExecuteTool.tsx
+++ b/site/src/components/ai-elements/tool/ExecuteTool.tsx
@@ -73,17 +73,11 @@ export const ExecuteTool: React.FC<{
 	return (
 		<div className="group/exec w-full overflow-hidden rounded-md border border-solid border-border-default bg-surface-primary">
 			{/* Header: $ command + copy button */}
-			<div
-				className={cn(
-					"flex w-full justify-between gap-2 px-2.5 py-0.5",
-					commandExpanded ? "items-start" : "items-center",
-				)}
-			>
+			<div className="flex w-full items-start justify-between gap-2 px-3 py-2">
 				{/* biome-ignore lint/a11y/useKeyWithClickEvents: Click toggles for mouse users; keyboard users use the chevron button. */}
 				<div
 					className={cn(
-						"flex min-w-0 flex-1 gap-2",
-						commandExpanded ? "items-start" : "items-center",
+						"flex min-w-0 flex-1 items-start gap-2",
 						canToggleCommand && "cursor-pointer",
 					)}
 					onClick={
@@ -138,9 +132,11 @@ export const ExecuteTool: React.FC<{
 							<TooltipContent>Running in background</TooltipContent>
 						</Tooltip>
 					)}
-					<span className="opacity-0 transition-opacity group-hover/exec:opacity-100">
-						<CopyButton text={command} label="Copy command" />
-					</span>
+					<CopyButton
+						text={command}
+						label="Copy command"
+						className="-my-0.5 size-6 p-0 opacity-0 transition-opacity hover:bg-surface-tertiary group-hover/exec:opacity-100"
+					/>
 				</div>
 			</div>
 			{/* Output preview / expanded */}
@@ -160,7 +156,7 @@ export const ExecuteTool: React.FC<{
 									: { maxHeight: COLLAPSED_OUTPUT_HEIGHT, overflow: "hidden" }
 							}
 							className={cn(
-								"m-0 border-0 whitespace-pre-wrap break-all bg-transparent px-2.5 py-2 font-mono text-xs",
+								"m-0 border-0 whitespace-pre-wrap break-all bg-transparent px-3 py-2 font-mono text-xs",
 								"text-content-secondary",
 							)}
 						>
diff --git a/site/src/components/ai-elements/tool/ProcessOutputTool.tsx b/site/src/components/ai-elements/tool/ProcessOutputTool.tsx
index 265f274f27..d326a68885 100644
--- a/site/src/components/ai-elements/tool/ProcessOutputTool.tsx
+++ b/site/src/components/ai-elements/tool/ProcessOutputTool.tsx
@@ -49,7 +49,7 @@ export const ProcessOutputTool: React.FC<{
 										: { maxHeight: COLLAPSED_OUTPUT_HEIGHT, overflow: "hidden" }
 								}
 								className={cn(
-									"m-0 border-0 whitespace-pre-wrap break-all bg-transparent px-2.5 py-2 font-mono text-xs",
+									"m-0 border-0 whitespace-pre-wrap break-all bg-transparent px-3 py-2 font-mono text-xs",
 									isError
 										? "text-content-destructive"
 										: "text-content-secondary",
@@ -90,7 +90,7 @@ export const ProcessOutputTool: React.FC<{
 					)}
 				</>
 			) : (
-				<div className="flex items-center gap-1 px-2.5 py-1.5">
+				<div className="flex items-center gap-1 px-3 py-1.5">
 					{isRunning && (
 						<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-content-secondary" />
 					)}
diff --git a/site/src/pages/AgentsPage/components/AgentDetail/ConversationTimeline.tsx b/site/src/pages/AgentsPage/components/AgentDetail/ConversationTimeline.tsx
index 2fb0442d4c..637fa0425b 100644
--- a/site/src/pages/AgentsPage/components/AgentDetail/ConversationTimeline.tsx
+++ b/site/src/pages/AgentsPage/components/AgentDetail/ConversationTimeline.tsx
@@ -564,7 +564,7 @@ const ChatMessageItem = memo<{
 													<TooltipTrigger asChild>
 														<button
 															type="button"
-															className="mt-0.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-content-secondary opacity-0 transition-opacity hover:bg-surface-tertiary hover:text-content-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link group-hover/msg:opacity-100"
+															className="-my-0.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-content-secondary opacity-0 transition-opacity hover:bg-surface-tertiary hover:text-content-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link group-hover/msg:opacity-100"
 															aria-label="Edit message"
 															onClick={() => {
 																const { text, fileBlocks } =