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

fix(site): fix exec tool layout shift on command expand (#23739)

Browse Source
This commit is contained in:
Danielle Maywood
2026-03-28 16:27:54 +00:00
committed by GitHub
parent a2799560eb
commit 565cf846de
3 changed files with 11 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/ai-elements/tool/ExecuteTool.tsx
+8 -12
View File
@@ -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",
)}
>
site/src/components/ai-elements/tool/ProcessOutputTool.tsx
+2 -2
View File
@@ -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" />
)}
site/src/pages/AgentsPage/components/AgentDetail/ConversationTimeline.tsx
+1 -1
View File
@@ -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 } =