From 43176a74a0932e3fa14dcf79ed3b9124dd99f6ca Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Sat, 7 Feb 2026 12:08:08 +1100
Subject: [PATCH] feat: change task `view prompt` `<Dropdown />` into a
 `<Popover />` (#21974)

---
 site/src/pages/TaskPage/TaskTopbar.tsx | 45 ++++++++++++++++----------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/site/src/pages/TaskPage/TaskTopbar.tsx b/site/src/pages/TaskPage/TaskTopbar.tsx
index bc5196878c..e0a21729d5 100644
--- a/site/src/pages/TaskPage/TaskTopbar.tsx
+++ b/site/src/pages/TaskPage/TaskTopbar.tsx
@@ -1,5 +1,10 @@
 import type { Task, Workspace } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "components/Popover/Popover";
 import {
 	Tooltip,
 	TooltipContent,
@@ -53,22 +58,28 @@ export const TaskTopbar: FC<TaskTopbarProps> = ({ task, workspace }) => {
 					lifecycleState={task.workspace_agent_lifecycle}
 				/>
 
-				<TooltipProvider delayDuration={250}>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button variant="outline" size="sm">
-								<SquareTerminalIcon />
-								View Prompt
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent className="max-w-xs bg-surface-secondary p-4">
-							<p className="m-0 mb-2 select-all text-sm font-normal text-content-primary leading-snug">
+				<Popover>
+					<PopoverTrigger asChild>
+						<Button variant="outline" size="sm">
+							<SquareTerminalIcon />
+							View Prompt
+						</Button>
+					</PopoverTrigger>
+					<PopoverContent
+						className="w-[402px] p-4 bg-surface-secondary text-content-secondary text-sm flex flex-col gap-3"
+						align="end"
+					>
+						<div className="text-sm font-semibold text-content-primary">
+							Prompt
+						</div>
+						<div className="m-0 mb-2 select-all leading-snug p-4 border border-solid rounded-lg font-mono">
+							<pre className="m-0 whitespace-pre-wrap break-words">
 								{task.initial_prompt}
-							</p>
-							<CopyPromptButton prompt={task.initial_prompt} />
-						</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
+							</pre>
+						</div>
+						<CopyPromptButton prompt={task.initial_prompt} />
+					</PopoverContent>
+				</Popover>
 
 				<Button asChild variant="outline" size="sm">
 					<RouterLink to={`/@${workspace.owner_name}/${workspace.name}`}>
@@ -90,8 +101,8 @@ const CopyPromptButton: FC<CopyPromptButtonProps> = ({ prompt }) => {
 			disabled={showCopiedSuccess}
 			onClick={() => copyToClipboard(prompt)}
 			size="sm"
-			variant="subtle"
-			className="p-0 min-w-0"
+			variant="outline"
+			className="p-0 min-w-0 w-full"
 		>
 			{showCopiedSuccess ? (
 				<>