From 90431a66f5278e88b8e1661b92553fdd4ed50c11 Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 11:41:44 +0100
Subject: [PATCH 1/7] fix(webapp): use native controls for inline actions

---
 apps/webapp/app/components/AskAI.tsx          |  6 +-
 .../app/components/code/TSQLResultsTable.tsx  | 59 +++++++++----------
 .../components/primitives/ClipboardField.tsx  |  9 +--
 .../app/components/primitives/CopyButton.tsx  |  6 +-
 .../components/primitives/CopyableText.tsx    | 14 +++--
 .../app/components/primitives/Table.tsx       | 59 +++++++++----------
 apps/webapp/app/components/runs/v3/RunTag.tsx | 20 ++++---
 7 files changed, 85 insertions(+), 88 deletions(-)

diff --git a/apps/webapp/app/components/AskAI.tsx b/apps/webapp/app/components/AskAI.tsx
index bc64a7e0c42..9404c2eff5d 100644
--- a/apps/webapp/app/components/AskAI.tsx
+++ b/apps/webapp/app/components/AskAI.tsx
@@ -544,7 +544,9 @@ function ChatInterface({ initialQuery }: { initialQuery?: string }) {
           {isGeneratingAnswer ? (
             <SimpleTooltip
               button={
-                <span
+                <button
+                  type="button"
+                  aria-label="Stop generating"
                   onClick={() => stopGeneration()}
                   className="group relative z-10 flex size-10 min-w-10 cursor-pointer items-center justify-center"
                 >
@@ -553,7 +555,7 @@ function ChatInterface({ initialQuery }: { initialQuery?: string }) {
                     className="absolute inset-0 animate-spin"
                     hoverEffect
                   />
-                </span>
+                </button>
               }
               content="Stop generating"
             />
diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 6da3caee0df..0f7afbe0ef9 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -856,37 +856,34 @@ function CopyableCell({
       onMouseLeave={() => setIsHovered(false)}
     >
       <span className="flex items-center truncate">{children}</span>
-      {isHovered && (
-        <span
-          onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            copy();
-          }}
-          className="absolute right-1 top-1/2 z-10 flex -translate-y-1/2 cursor-pointer"
-        >
-          <SimpleTooltip
-            button={
-              <span
-                className={cn(
-                  "flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover",
-                  copied
-                    ? "text-green-500"
-                    : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
-                )}
-              >
-                {copied ? (
-                  <ClipboardCheckIcon className="size-3.5" />
-                ) : (
-                  <ClipboardIcon className="size-3.5" />
-                )}
-              </span>
-            }
-            content={copied ? "Copied!" : "Copy"}
-            disableHoverableContent
-          />
-        </span>
-      )}
+      <SimpleTooltip
+        button={
+          <button
+            type="button"
+            aria-label={copied ? "Copied" : "Copy"}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              copy();
+            }}
+            className={cn(
+              "absolute right-1 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded border border-border-bright bg-background-hover transition-opacity focus:opacity-100",
+              isHovered ? "opacity-100" : "pointer-events-none opacity-0",
+              copied
+                ? "text-green-500"
+                : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
+            )}
+          >
+            {copied ? (
+              <ClipboardCheckIcon className="size-3.5" />
+            ) : (
+              <ClipboardIcon className="size-3.5" />
+            )}
+          </button>
+        }
+        content={copied ? "Copied!" : "Copy"}
+        disableHoverableContent
+      />
     </div>
   );
 }
diff --git a/apps/webapp/app/components/primitives/ClipboardField.tsx b/apps/webapp/app/components/primitives/ClipboardField.tsx
index 622c5bde430..24fdf4942b1 100644
--- a/apps/webapp/app/components/primitives/ClipboardField.tsx
+++ b/apps/webapp/app/components/primitives/ClipboardField.tsx
@@ -127,14 +127,7 @@ export function ClipboardField({
 
   return (
     <span className={cn(container, fullWidth ? "w-full" : "max-w-fit", className)}>
-      {icon && (
-        <span
-          onClick={() => inputIcon.current && inputIcon.current.focus()}
-          className="flex items-center pl-1"
-        >
-          {icon}
-        </span>
-      )}
+      {icon && <span className="flex items-center pl-1">{icon}</span>}
       <input
         type="text"
         ref={inputIcon}
diff --git a/apps/webapp/app/components/primitives/CopyButton.tsx b/apps/webapp/app/components/primitives/CopyButton.tsx
index c855d4ad137..b0f004fc47a 100644
--- a/apps/webapp/app/components/primitives/CopyButton.tsx
+++ b/apps/webapp/app/components/primitives/CopyButton.tsx
@@ -46,7 +46,9 @@ export function CopyButton({
 
   const button =
     variant === "icon" ? (
-      <span
+      <button
+        type="button"
+        aria-label={copied ? "Copied" : "Copy"}
         onClick={copy}
         className={cn(
           buttonSize,
@@ -62,7 +64,7 @@ export function CopyButton({
         ) : (
           <ClipboardIcon className={iconSize} />
         )}
-      </span>
+      </button>
     ) : (
       <Button
         variant={`${buttonVariant}/${size === "extra-small" ? "small" : size}`}
diff --git a/apps/webapp/app/components/primitives/CopyableText.tsx b/apps/webapp/app/components/primitives/CopyableText.tsx
index bf5898390a3..e997fe02bb0 100644
--- a/apps/webapp/app/components/primitives/CopyableText.tsx
+++ b/apps/webapp/app/components/primitives/CopyableText.tsx
@@ -39,7 +39,11 @@ export function CopyableText({
 
   if (resolvedVariant === "icon-right") {
     const iconButton = (
-      <span
+      <button
+        type="button"
+        aria-label={copied ? "Copied" : "Copy"}
+        onClick={copy}
+        onMouseDown={(e) => e.stopPropagation()}
         className={cn(
           "ml-1 flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover",
           asChild && "p-1",
@@ -53,7 +57,7 @@ export function CopyableText({
         ) : (
           <ClipboardIcon className="size-3.5" />
         )}
-      </span>
+      </button>
     );
 
     return (
@@ -72,13 +76,11 @@ export function CopyableText({
           {value}
         </span>
         <span
-          onClick={copy}
-          onMouseDown={(e) => e.stopPropagation()}
           className={cn(
-            "absolute top-0 z-10 size-6 font-sans",
+            "absolute top-0 z-10 flex size-6 font-sans transition-opacity focus-within:opacity-100",
             // Truncated values reserve a right gutter, so the button sits inside it
             truncate ? "right-0" : "-right-6",
-            isHovered ? "flex" : "hidden"
+            isHovered ? "opacity-100" : "pointer-events-none opacity-0"
           )}
         >
           {hideTooltip ? (
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 9ade6c34bc2..4763a504005 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -486,37 +486,34 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
           onMouseLeave={() => setIsHovered(false)}
         >
           {children}
-          {isHovered && (
-            <span
-              onClick={(e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                copy();
-              }}
-              className="absolute -right-2 top-1/2 z-10 flex -translate-y-1/2 cursor-pointer"
-            >
-              <SimpleTooltip
-                button={
-                  <span
-                    className={cn(
-                      "flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover",
-                      copied
-                        ? "text-green-500"
-                        : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
-                    )}
-                  >
-                    {copied ? (
-                      <ClipboardCheckIcon className="size-3.5" />
-                    ) : (
-                      <ClipboardIcon className="size-3.5" />
-                    )}
-                  </span>
-                }
-                content={copied ? "Copied!" : "Copy"}
-                disableHoverableContent
-              />
-            </span>
-          )}
+          <SimpleTooltip
+            button={
+              <button
+                type="button"
+                aria-label={copied ? "Copied" : "Copy"}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  copy();
+                }}
+                className={cn(
+                  "absolute -right-2 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded border border-border-bright bg-background-hover transition-opacity focus:opacity-100",
+                  isHovered ? "opacity-100" : "pointer-events-none opacity-0",
+                  copied
+                    ? "text-green-500"
+                    : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
+                )}
+              >
+                {copied ? (
+                  <ClipboardCheckIcon className="size-3.5" />
+                ) : (
+                  <ClipboardIcon className="size-3.5" />
+                )}
+              </button>
+            }
+            content={copied ? "Copied!" : "Copy"}
+            disableHoverableContent
+          />
         </div>
       </TableCell>
     );
diff --git a/apps/webapp/app/components/runs/v3/RunTag.tsx b/apps/webapp/app/components/runs/v3/RunTag.tsx
index 16d2333632e..405e3b6a913 100644
--- a/apps/webapp/app/components/runs/v3/RunTag.tsx
+++ b/apps/webapp/app/components/runs/v3/RunTag.tsx
@@ -114,12 +114,14 @@ function CopyButton({ textToCopy, isHovered }: { textToCopy: string; isHovered:
   return (
     <SimpleTooltip
       button={
-        <span
+        <button
+          type="button"
+          aria-label={copied ? "Copied" : "Copy tag"}
           onClick={copy}
           onMouseDown={(e) => e.stopPropagation()}
           className={cn(
-            "absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover",
-            isHovered ? "flex" : "hidden",
+            "absolute -right-6 top-0 z-10 flex size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover transition-opacity focus:opacity-100",
+            isHovered ? "opacity-100" : "pointer-events-none opacity-0",
             copied
               ? "text-green-500"
               : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
@@ -130,7 +132,7 @@ function CopyButton({ textToCopy, isHovered }: { textToCopy: string; isHovered:
           ) : (
             <ClipboardIcon className="size-3.5" />
           )}
-        </span>
+        </button>
       }
       content={copied ? "Copied!" : "Copy tag"}
       disableHoverableContent
@@ -159,17 +161,19 @@ function DeleteButton({
   return (
     <SimpleTooltip
       button={
-        <span
+        <button
+          type="button"
+          aria-label="Remove tag"
           onClick={handleDelete}
           onMouseDown={(e) => e.stopPropagation()}
           className={cn(
-            "absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover",
-            isHovered ? "flex" : "hidden",
+            "absolute -right-6 top-0 z-10 flex size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover transition-opacity focus:opacity-100",
+            isHovered ? "opacity-100" : "pointer-events-none opacity-0",
             "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-rose-400"
           )}
         >
           <XIcon className="size-3.5" />
-        </span>
+        </button>
       }
       content="Remove tag"
       disableHoverableContent

From 1cb13d2387a636babe0cb362770fe15feee92cf9 Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 12:00:45 +0100
Subject: [PATCH 2/7] fix(webapp): preserve tooltip trigger semantics

---
 apps/webapp/app/components/AskAI.tsx                            | 1 +
 apps/webapp/app/components/code/TSQLResultsTable.tsx            | 1 +
 .../components/dashboard-agent/tooltip-accessible-name.test.ts  | 1 -
 apps/webapp/app/components/primitives/CopyButton.tsx            | 1 +
 apps/webapp/app/components/primitives/Table.tsx                 | 1 +
 apps/webapp/app/components/runs/v3/RunTag.tsx                   | 2 ++
 6 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/AskAI.tsx b/apps/webapp/app/components/AskAI.tsx
index 9404c2eff5d..0ac70cf2fb0 100644
--- a/apps/webapp/app/components/AskAI.tsx
+++ b/apps/webapp/app/components/AskAI.tsx
@@ -543,6 +543,7 @@ function ChatInterface({ initialQuery }: { initialQuery?: string }) {
           />
           {isGeneratingAnswer ? (
             <SimpleTooltip
+              asChild
               button={
                 <button
                   type="button"
diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 0f7afbe0ef9..146d6545e69 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -857,6 +857,7 @@ function CopyableCell({
     >
       <span className="flex items-center truncate">{children}</span>
       <SimpleTooltip
+        asChild
         button={
           <button
             type="button"
diff --git a/apps/webapp/app/components/dashboard-agent/tooltip-accessible-name.test.ts b/apps/webapp/app/components/dashboard-agent/tooltip-accessible-name.test.ts
index 361d20c456e..21ec1595e76 100644
--- a/apps/webapp/app/components/dashboard-agent/tooltip-accessible-name.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/tooltip-accessible-name.test.ts
@@ -60,7 +60,6 @@ const NO_AS_CHILD_BASELINE = new Set([
   "app/components/GitMetadata.tsx::LinkButton",
   "app/components/code/TSQLResultsTable.tsx::TextLink",
   "app/components/integrations/VercelLink.tsx::LinkButton",
-  "app/components/primitives/CopyButton.tsx::Button",
   "app/components/runs/v3/RunTag.tsx::Link",
   "app/components/runs/v3/TaskRunsTable.tsx::DialogTrigger",
   "app/routes/account.tokens/route.tsx::DialogTrigger",
diff --git a/apps/webapp/app/components/primitives/CopyButton.tsx b/apps/webapp/app/components/primitives/CopyButton.tsx
index b0f004fc47a..cb1b68178e8 100644
--- a/apps/webapp/app/components/primitives/CopyButton.tsx
+++ b/apps/webapp/app/components/primitives/CopyButton.tsx
@@ -97,6 +97,7 @@ export function CopyButton({
   return (
     <span className={className}>
       <SimpleTooltip
+        asChild
         button={button}
         content={copied ? "Copied!" : "Copy"}
         className="font-sans"
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 4763a504005..88d790ffb20 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -487,6 +487,7 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
         >
           {children}
           <SimpleTooltip
+            asChild
             button={
               <button
                 type="button"
diff --git a/apps/webapp/app/components/runs/v3/RunTag.tsx b/apps/webapp/app/components/runs/v3/RunTag.tsx
index 405e3b6a913..6a7cd32616e 100644
--- a/apps/webapp/app/components/runs/v3/RunTag.tsx
+++ b/apps/webapp/app/components/runs/v3/RunTag.tsx
@@ -113,6 +113,7 @@ function CopyButton({ textToCopy, isHovered }: { textToCopy: string; isHovered:
 
   return (
     <SimpleTooltip
+      asChild
       button={
         <button
           type="button"
@@ -160,6 +161,7 @@ function DeleteButton({
 
   return (
     <SimpleTooltip
+      asChild
       button={
         <button
           type="button"

From a971a52c11ddb343e13ebc025cf9d8f7f2d990a9 Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 12:55:37 +0100
Subject: [PATCH 3/7] fix(webapp): keep tooltip controls keyboard accessible

---
 apps/webapp/app/components/AskAI.tsx          |   1 +
 .../app/components/code/TSQLResultsTable.tsx  |   1 +
 .../tooltip-accessible-name.test.ts           |  12 +-
 .../app/components/primitives/CopyButton.tsx  | 103 ++++++++++--------
 .../components/primitives/CopyableText.tsx    |   3 +-
 .../app/components/primitives/Table.tsx       |   1 +
 apps/webapp/app/components/runs/v3/RunTag.tsx |   2 +
 7 files changed, 73 insertions(+), 50 deletions(-)

diff --git a/apps/webapp/app/components/AskAI.tsx b/apps/webapp/app/components/AskAI.tsx
index 0ac70cf2fb0..96be9dd7075 100644
--- a/apps/webapp/app/components/AskAI.tsx
+++ b/apps/webapp/app/components/AskAI.tsx
@@ -544,6 +544,7 @@ function ChatInterface({ initialQuery }: { initialQuery?: string }) {
           {isGeneratingAnswer ? (
             <SimpleTooltip
               asChild
+              tabbable
               button={
                 <button
                   type="button"
diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 146d6545e69..cea2cf90ecd 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -858,6 +858,7 @@ function CopyableCell({
       <span className="flex items-center truncate">{children}</span>
       <SimpleTooltip
         asChild
+        tabbable
         button={
           <button
             type="button"
diff --git a/apps/webapp/app/components/dashboard-agent/tooltip-accessible-name.test.ts b/apps/webapp/app/components/dashboard-agent/tooltip-accessible-name.test.ts
index 21ec1595e76..5c0379b1b3e 100644
--- a/apps/webapp/app/components/dashboard-agent/tooltip-accessible-name.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/tooltip-accessible-name.test.ts
@@ -89,6 +89,16 @@ function attrOf(node: JsxNode, name: string) {
   return open.attributes.properties.find((p) => ts.isJsxAttribute(p) && p.name.getText() === name);
 }
 
+function hasStaticTrueAttribute(node: JsxNode, name: string): boolean {
+  const attribute = attrOf(node, name);
+  if (!attribute || !ts.isJsxAttribute(attribute)) return false;
+  if (!attribute.initializer) return true;
+  return (
+    ts.isJsxExpression(attribute.initializer) &&
+    attribute.initializer.expression?.kind === ts.SyntaxKind.TrueKeyword
+  );
+}
+
 /** Text anywhere under the element, ignoring an expression that can render nothing. */
 function hasText(node: TsNode): boolean {
   if (!ts.isJsxElement(node)) return false;
@@ -178,7 +188,7 @@ function scanFile(file: string, relative: string): Violation[] {
       const initializer =
         buttonAttr && ts.isJsxAttribute(buttonAttr) ? buttonAttr.initializer : undefined;
       if (initializer && ts.isJsxExpression(initializer)) {
-        const asChild = !!attrOf(node, "asChild");
+        const asChild = hasStaticTrueAttribute(node, "asChild");
         for (const trigger of resolve(initializer.expression).flatMap(triggersIn)) {
           const named =
             !!attrOf(trigger, "aria-label") ||
diff --git a/apps/webapp/app/components/primitives/CopyButton.tsx b/apps/webapp/app/components/primitives/CopyButton.tsx
index cb1b68178e8..2685f9ab6ed 100644
--- a/apps/webapp/app/components/primitives/CopyButton.tsx
+++ b/apps/webapp/app/components/primitives/CopyButton.tsx
@@ -44,61 +44,68 @@ export function CopyButton({
 
   const { icon: iconSize, button: buttonSize } = sizes[size];
 
-  const button =
-    variant === "icon" ? (
-      <button
-        type="button"
-        aria-label={copied ? "Copied" : "Copy"}
-        onClick={copy}
-        className={cn(
-          buttonSize,
-          "flex shrink-0 items-center justify-center rounded border border-border-bright bg-background-hover",
-          copied
-            ? "text-green-500"
-            : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright",
-          buttonClassName
-        )}
-      >
-        {copied ? (
-          <ClipboardCheckIcon className={iconSize} />
-        ) : (
-          <ClipboardIcon className={iconSize} />
-        )}
-      </button>
-    ) : (
-      <Button
-        variant={`${buttonVariant}/${size === "extra-small" ? "small" : size}`}
-        onClick={copy}
-        className={cn("shrink-0", buttonClassName)}
-        LeadingIcon={
-          copied ? (
-            <ClipboardCheckIcon
-              className={cn(
-                iconSize,
-                buttonVariant === "primary" ? "text-background-dimmed" : "text-green-500"
-              )}
-            />
-          ) : (
-            <ClipboardIcon
-              className={cn(
-                iconSize,
-                buttonVariant === "primary" ? "text-background-dimmed" : "text-text-dimmed"
-              )}
-            />
-          )
-        }
-      >
-        {children}
-      </Button>
+  if (variant === "button") {
+    return (
+      <span className={className}>
+        <Button
+          variant={`${buttonVariant}/${size === "extra-small" ? "small" : size}`}
+          onClick={copy}
+          className={cn("shrink-0", buttonClassName)}
+          tooltip={showTooltip ? (copied ? "Copied!" : "Copy") : undefined}
+          LeadingIcon={
+            copied ? (
+              <ClipboardCheckIcon
+                className={cn(
+                  iconSize,
+                  buttonVariant === "primary" ? "text-background-dimmed" : "text-green-500"
+                )}
+              />
+            ) : (
+              <ClipboardIcon
+                className={cn(
+                  iconSize,
+                  buttonVariant === "primary" ? "text-background-dimmed" : "text-text-dimmed"
+                )}
+              />
+            )
+          }
+        >
+          {children}
+        </Button>
+      </span>
     );
+  }
 
-  if (!showTooltip) return <span className={className}>{button}</span>;
+  const iconButton = (
+    <button
+      type="button"
+      aria-label={copied ? "Copied" : "Copy"}
+      onClick={copy}
+      className={cn(
+        buttonSize,
+        "flex shrink-0 items-center justify-center rounded border border-border-bright bg-background-hover",
+        copied
+          ? "text-green-500"
+          : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright",
+        buttonClassName
+      )}
+    >
+      {copied ? (
+        <ClipboardCheckIcon className={iconSize} />
+      ) : (
+        <ClipboardIcon className={iconSize} />
+      )}
+    </button>
+  );
+
+  if (!showTooltip) return <span className={className}>{iconButton}</span>;
 
   return (
     <span className={className}>
       <SimpleTooltip
         asChild
-        button={button}
+        tabbable
+        button={iconButton}
         content={copied ? "Copied!" : "Copy"}
         className="font-sans"
         disableHoverableContent
diff --git a/apps/webapp/app/components/primitives/CopyableText.tsx b/apps/webapp/app/components/primitives/CopyableText.tsx
index e997fe02bb0..415bedb2fe2 100644
--- a/apps/webapp/app/components/primitives/CopyableText.tsx
+++ b/apps/webapp/app/components/primitives/CopyableText.tsx
@@ -87,11 +87,12 @@ export function CopyableText({
             iconButton
           ) : (
             <SimpleTooltip
+              asChild
+              tabbable
               button={iconButton}
               content={copied ? "Copied!" : "Copy"}
               className="font-sans"
               disableHoverableContent
-              asChild={asChild}
             />
           )}
         </span>
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 88d790ffb20..f9136aacb0e 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -488,6 +488,7 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
           {children}
           <SimpleTooltip
             asChild
+            tabbable
             button={
               <button
                 type="button"
diff --git a/apps/webapp/app/components/runs/v3/RunTag.tsx b/apps/webapp/app/components/runs/v3/RunTag.tsx
index 6a7cd32616e..6719a34e45b 100644
--- a/apps/webapp/app/components/runs/v3/RunTag.tsx
+++ b/apps/webapp/app/components/runs/v3/RunTag.tsx
@@ -114,6 +114,7 @@ function CopyButton({ textToCopy, isHovered }: { textToCopy: string; isHovered:
   return (
     <SimpleTooltip
       asChild
+      tabbable
       button={
         <button
           type="button"
@@ -162,6 +163,7 @@ function DeleteButton({
   return (
     <SimpleTooltip
       asChild
+      tabbable
       button={
         <button
           type="button"

From f93a44deb5bbad68a763ab8fdd6ccb1e927b500e Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 13:38:09 +0100
Subject: [PATCH 4/7] fix(webapp): avoid mounting copy tooltips for every
 visible cell

Only mount the tooltip subtree for a copyable cell while it is
hovered; the plain button (with its aria-label) stays mounted at all
times so keyboard users can always reach it. Also give the icon-only
CopyButton an accessible name when it renders without children.
---
 .../app/components/code/TSQLResultsTable.tsx  | 70 +++++++++++--------
 .../app/components/primitives/CopyButton.tsx  |  1 +
 .../app/components/primitives/Table.tsx       | 69 ++++++++++--------
 3 files changed, 80 insertions(+), 60 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index cea2cf90ecd..519177ebe8d 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -843,6 +843,35 @@ function CopyableCell({
   const [isHovered, setIsHovered] = useState(false);
   const { copy, copied } = useCopy(value);
 
+  // The button (with its aria-label) stays mounted at all times so keyboard users can always
+  // reach it. The Radix tooltip subtree is comparatively expensive to keep alive for every
+  // visible cell of a virtualized grid, so it's only mounted while the cell is hovered - the
+  // tooltip is a hover affordance, not required for the button's accessible name.
+  const copyButton = (
+    <button
+      type="button"
+      aria-label={copied ? "Copied" : "Copy"}
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        copy();
+      }}
+      className={cn(
+        "absolute right-1 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded border border-border-bright bg-background-hover transition-opacity focus:opacity-100",
+        isHovered ? "opacity-100" : "pointer-events-none opacity-0",
+        copied
+          ? "text-green-500"
+          : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
+      )}
+    >
+      {copied ? (
+        <ClipboardCheckIcon className="size-3.5" />
+      ) : (
+        <ClipboardIcon className="size-3.5" />
+      )}
+    </button>
+  );
+
   return (
     <div
       className={cn(
@@ -856,36 +885,17 @@ function CopyableCell({
       onMouseLeave={() => setIsHovered(false)}
     >
       <span className="flex items-center truncate">{children}</span>
-      <SimpleTooltip
-        asChild
-        tabbable
-        button={
-          <button
-            type="button"
-            aria-label={copied ? "Copied" : "Copy"}
-            onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              copy();
-            }}
-            className={cn(
-              "absolute right-1 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded border border-border-bright bg-background-hover transition-opacity focus:opacity-100",
-              isHovered ? "opacity-100" : "pointer-events-none opacity-0",
-              copied
-                ? "text-green-500"
-                : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
-            )}
-          >
-            {copied ? (
-              <ClipboardCheckIcon className="size-3.5" />
-            ) : (
-              <ClipboardIcon className="size-3.5" />
-            )}
-          </button>
-        }
-        content={copied ? "Copied!" : "Copy"}
-        disableHoverableContent
-      />
+      {isHovered ? (
+        <SimpleTooltip
+          asChild
+          tabbable
+          button={copyButton}
+          content={copied ? "Copied!" : "Copy"}
+          disableHoverableContent
+        />
+      ) : (
+        copyButton
+      )}
     </div>
   );
 }
diff --git a/apps/webapp/app/components/primitives/CopyButton.tsx b/apps/webapp/app/components/primitives/CopyButton.tsx
index 2685f9ab6ed..88a663dfe27 100644
--- a/apps/webapp/app/components/primitives/CopyButton.tsx
+++ b/apps/webapp/app/components/primitives/CopyButton.tsx
@@ -52,6 +52,7 @@ export function CopyButton({
           onClick={copy}
           className={cn("shrink-0", buttonClassName)}
           tooltip={showTooltip ? (copied ? "Copied!" : "Copy") : undefined}
+          aria-label={children ? undefined : copied ? "Copied" : "Copy"}
           LeadingIcon={
             copied ? (
               <ClipboardCheckIcon
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index f9136aacb0e..d4cb874b61a 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -478,6 +478,34 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
     const [isHovered, setIsHovered] = useState(false);
     const { copy, copied } = useCopy(value);
 
+    // The button (with its aria-label) stays mounted at all times so keyboard users can always
+    // reach it. The Radix tooltip subtree is only mounted while the cell is hovered - the
+    // tooltip is a hover affordance, not required for the button's accessible name.
+    const copyButton = (
+      <button
+        type="button"
+        aria-label={copied ? "Copied" : "Copy"}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          copy();
+        }}
+        className={cn(
+          "absolute -right-2 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded border border-border-bright bg-background-hover transition-opacity focus:opacity-100",
+          isHovered ? "opacity-100" : "pointer-events-none opacity-0",
+          copied
+            ? "text-green-500"
+            : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
+        )}
+      >
+        {copied ? (
+          <ClipboardCheckIcon className="size-3.5" />
+        ) : (
+          <ClipboardIcon className="size-3.5" />
+        )}
+      </button>
+    );
+
     return (
       <TableCell ref={ref} className={className} {...props}>
         <div
@@ -486,36 +514,17 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
           onMouseLeave={() => setIsHovered(false)}
         >
           {children}
-          <SimpleTooltip
-            asChild
-            tabbable
-            button={
-              <button
-                type="button"
-                aria-label={copied ? "Copied" : "Copy"}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  copy();
-                }}
-                className={cn(
-                  "absolute -right-2 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded border border-border-bright bg-background-hover transition-opacity focus:opacity-100",
-                  isHovered ? "opacity-100" : "pointer-events-none opacity-0",
-                  copied
-                    ? "text-green-500"
-                    : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
-                )}
-              >
-                {copied ? (
-                  <ClipboardCheckIcon className="size-3.5" />
-                ) : (
-                  <ClipboardIcon className="size-3.5" />
-                )}
-              </button>
-            }
-            content={copied ? "Copied!" : "Copy"}
-            disableHoverableContent
-          />
+          {isHovered ? (
+            <SimpleTooltip
+              asChild
+              tabbable
+              button={copyButton}
+              content={copied ? "Copied!" : "Copy"}
+              disableHoverableContent
+            />
+          ) : (
+            copyButton
+          )}
         </div>
       </TableCell>
     );

From 5e1c6beaab1247a7f9f6c2113cf5edeabb6253ee Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 14:07:14 +0100
Subject: [PATCH 5/7] fix(webapp): preserve focus across copy tooltips

---
 .../app/components/code/TSQLResultsTable.tsx  | 28 +++++++++----------
 .../components/primitives/ClipboardField.tsx  | 12 +++++---
 .../app/components/primitives/Table.tsx       | 26 ++++++++---------
 3 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 519177ebe8d..9af69819309 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -843,10 +843,11 @@ function CopyableCell({
   const [isHovered, setIsHovered] = useState(false);
   const { copy, copied } = useCopy(value);
 
-  // The button (with its aria-label) stays mounted at all times so keyboard users can always
-  // reach it. The Radix tooltip subtree is comparatively expensive to keep alive for every
-  // visible cell of a virtualized grid, so it's only mounted while the cell is hovered - the
-  // tooltip is a hover affordance, not required for the button's accessible name.
+  // The button (with its aria-label) always sits in the same position in the tree, wrapped by
+  // the same SimpleTooltip, so it is never unmounted/remounted on hover (which would drop
+  // keyboard focus). Only the tooltip's open state, not its mounted tree, follows hover; Radix
+  // still only renders the (comparatively expensive) tooltip content into the DOM of this
+  // virtualized grid while `open` is true.
   const copyButton = (
     <button
       type="button"
@@ -885,17 +886,14 @@ function CopyableCell({
       onMouseLeave={() => setIsHovered(false)}
     >
       <span className="flex items-center truncate">{children}</span>
-      {isHovered ? (
-        <SimpleTooltip
-          asChild
-          tabbable
-          button={copyButton}
-          content={copied ? "Copied!" : "Copy"}
-          disableHoverableContent
-        />
-      ) : (
-        copyButton
-      )}
+      <SimpleTooltip
+        asChild
+        tabbable
+        open={isHovered}
+        button={copyButton}
+        content={copied ? "Copied!" : "Copy"}
+        disableHoverableContent
+      />
     </div>
   );
 }
diff --git a/apps/webapp/app/components/primitives/ClipboardField.tsx b/apps/webapp/app/components/primitives/ClipboardField.tsx
index 24fdf4942b1..73facf3bcc0 100644
--- a/apps/webapp/app/components/primitives/ClipboardField.tsx
+++ b/apps/webapp/app/components/primitives/ClipboardField.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { cn } from "~/utils/cn";
 import { CopyButton } from "./CopyButton";
 
@@ -116,7 +116,7 @@ export function ClipboardField({
   fullWidth = true,
 }: ClipboardFieldProps) {
   const [isSecure, setIsSecure] = useState(secure !== undefined && secure);
-  const inputIcon = useRef<HTMLInputElement>(null);
+  const inputId = useId();
   const { container, input, buttonVariant, button, size } = variants[variant];
 
   useEffect(() => {
@@ -127,10 +127,14 @@ export function ClipboardField({
 
   return (
     <span className={cn(container, fullWidth ? "w-full" : "max-w-fit", className)}>
-      {icon && <span className="flex items-center pl-1">{icon}</span>}
+      {icon && (
+        <label htmlFor={inputId} className="flex items-center pl-1">
+          {icon}
+        </label>
+      )}
       <input
+        id={inputId}
         type="text"
-        ref={inputIcon}
         value={isSecure ? maskedValue : value}
         readOnly={true}
         className={cn(
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index d4cb874b61a..7907be80fcf 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -478,9 +478,10 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
     const [isHovered, setIsHovered] = useState(false);
     const { copy, copied } = useCopy(value);
 
-    // The button (with its aria-label) stays mounted at all times so keyboard users can always
-    // reach it. The Radix tooltip subtree is only mounted while the cell is hovered - the
-    // tooltip is a hover affordance, not required for the button's accessible name.
+    // The button (with its aria-label) always sits in the same position in the tree, wrapped by
+    // the same SimpleTooltip, so it is never unmounted/remounted on hover (which would drop
+    // keyboard focus). Only the tooltip's open state, not its mounted tree, follows hover; Radix
+    // still only renders the tooltip content into the DOM while `open` is true.
     const copyButton = (
       <button
         type="button"
@@ -514,17 +515,14 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
           onMouseLeave={() => setIsHovered(false)}
         >
           {children}
-          {isHovered ? (
-            <SimpleTooltip
-              asChild
-              tabbable
-              button={copyButton}
-              content={copied ? "Copied!" : "Copy"}
-              disableHoverableContent
-            />
-          ) : (
-            copyButton
-          )}
+          <SimpleTooltip
+            asChild
+            tabbable
+            open={isHovered}
+            button={copyButton}
+            content={copied ? "Copied!" : "Copy"}
+            disableHoverableContent
+          />
         </div>
       </TableCell>
     );

From 3992f467262deb329826bb7bed4d83eb79623fb3 Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 14:36:26 +0100
Subject: [PATCH 6/7] fix(webapp): stop copy tooltip opening on whole-cell
 hover

The copy-cell tooltip was wired to a controlled `open` state that
followed the whole cell's hover, so it popped open over neighbouring
content whenever the pointer crossed any part of the cell instead of
just the copy button. Leave the tooltip uncontrolled so Radix opens
it only when the pointer or keyboard focus lands on the button
itself; the button still stays permanently mounted so it keeps its
place in the tab order.
---
 apps/webapp/app/components/code/TSQLResultsTable.tsx | 7 +++----
 apps/webapp/app/components/primitives/Table.tsx      | 5 ++---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 9af69819309..1221d8c367f 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -845,9 +845,9 @@ function CopyableCell({
 
   // The button (with its aria-label) always sits in the same position in the tree, wrapped by
   // the same SimpleTooltip, so it is never unmounted/remounted on hover (which would drop
-  // keyboard focus). Only the tooltip's open state, not its mounted tree, follows hover; Radix
-  // still only renders the (comparatively expensive) tooltip content into the DOM of this
-  // virtualized grid while `open` is true.
+  // keyboard focus). The tooltip is left uncontrolled so Radix opens it only when the pointer or
+  // keyboard focus is actually on the button, not whenever the pointer is anywhere in this
+  // virtualized grid's cell.
   const copyButton = (
     <button
       type="button"
@@ -889,7 +889,6 @@ function CopyableCell({
       <SimpleTooltip
         asChild
         tabbable
-        open={isHovered}
         button={copyButton}
         content={copied ? "Copied!" : "Copy"}
         disableHoverableContent
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 7907be80fcf..9888bc4986d 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -480,8 +480,8 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
 
     // The button (with its aria-label) always sits in the same position in the tree, wrapped by
     // the same SimpleTooltip, so it is never unmounted/remounted on hover (which would drop
-    // keyboard focus). Only the tooltip's open state, not its mounted tree, follows hover; Radix
-    // still only renders the tooltip content into the DOM while `open` is true.
+    // keyboard focus). The tooltip is left uncontrolled so Radix opens it only when the pointer
+    // or keyboard focus is actually on the button, not whenever the pointer is anywhere in the cell.
     const copyButton = (
       <button
         type="button"
@@ -518,7 +518,6 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
           <SimpleTooltip
             asChild
             tabbable
-            open={isHovered}
             button={copyButton}
             content={copied ? "Copied!" : "Copy"}
             disableHoverableContent

From b043570a77880f9a13f4e1671f7d645ba0bcd2f0 Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 15:03:53 +0100
Subject: [PATCH 7/7] fix(webapp): hide copy controls after pointer exit

---
 apps/webapp/app/components/code/TSQLResultsTable.tsx   | 5 +++--
 apps/webapp/app/components/primitives/CopyableText.tsx | 2 +-
 apps/webapp/app/components/primitives/Table.tsx        | 4 +++-
 apps/webapp/app/components/runs/v3/RunTag.tsx          | 4 ++--
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 1221d8c367f..c1a627b8db8 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -847,7 +847,8 @@ function CopyableCell({
   // the same SimpleTooltip, so it is never unmounted/remounted on hover (which would drop
   // keyboard focus). The tooltip is left uncontrolled so Radix opens it only when the pointer or
   // keyboard focus is actually on the button, not whenever the pointer is anywhere in this
-  // virtualized grid's cell.
+  // virtualized grid's cell. `focus-visible:` (not `focus:`) ensures keyboard focus reveals the
+  // button without leaving it visible after a mouse click moves outside the cell.
   const copyButton = (
     <button
       type="button"
@@ -858,7 +859,7 @@ function CopyableCell({
         copy();
       }}
       className={cn(
-        "absolute right-1 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded border border-border-bright bg-background-hover transition-opacity focus:opacity-100",
+        "absolute right-1 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded border border-border-bright bg-background-hover transition-opacity focus-visible:pointer-events-auto focus-visible:opacity-100",
         isHovered ? "opacity-100" : "pointer-events-none opacity-0",
         copied
           ? "text-green-500"
diff --git a/apps/webapp/app/components/primitives/CopyableText.tsx b/apps/webapp/app/components/primitives/CopyableText.tsx
index 415bedb2fe2..60d4799b201 100644
--- a/apps/webapp/app/components/primitives/CopyableText.tsx
+++ b/apps/webapp/app/components/primitives/CopyableText.tsx
@@ -77,7 +77,7 @@ export function CopyableText({
         </span>
         <span
           className={cn(
-            "absolute top-0 z-10 flex size-6 font-sans transition-opacity focus-within:opacity-100",
+            "absolute top-0 z-10 flex size-6 font-sans transition-opacity has-focus-visible:pointer-events-auto has-focus-visible:opacity-100",
             // Truncated values reserve a right gutter, so the button sits inside it
             truncate ? "right-0" : "-right-6",
             isHovered ? "opacity-100" : "pointer-events-none opacity-0"
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 9888bc4986d..5eaf30f89e9 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -482,6 +482,8 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
     // the same SimpleTooltip, so it is never unmounted/remounted on hover (which would drop
     // keyboard focus). The tooltip is left uncontrolled so Radix opens it only when the pointer
     // or keyboard focus is actually on the button, not whenever the pointer is anywhere in the cell.
+    // `focus-visible:` reveals keyboard focus without leaving the button visible after a mouse click
+    // moves outside the cell.
     const copyButton = (
       <button
         type="button"
@@ -492,7 +494,7 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
           copy();
         }}
         className={cn(
-          "absolute -right-2 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded border border-border-bright bg-background-hover transition-opacity focus:opacity-100",
+          "absolute -right-2 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded border border-border-bright bg-background-hover transition-opacity focus-visible:pointer-events-auto focus-visible:opacity-100",
           isHovered ? "opacity-100" : "pointer-events-none opacity-0",
           copied
             ? "text-green-500"
diff --git a/apps/webapp/app/components/runs/v3/RunTag.tsx b/apps/webapp/app/components/runs/v3/RunTag.tsx
index 6719a34e45b..379c89b073b 100644
--- a/apps/webapp/app/components/runs/v3/RunTag.tsx
+++ b/apps/webapp/app/components/runs/v3/RunTag.tsx
@@ -122,7 +122,7 @@ function CopyButton({ textToCopy, isHovered }: { textToCopy: string; isHovered:
           onClick={copy}
           onMouseDown={(e) => e.stopPropagation()}
           className={cn(
-            "absolute -right-6 top-0 z-10 flex size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover transition-opacity focus:opacity-100",
+            "absolute -right-6 top-0 z-10 flex size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover transition-opacity focus-visible:pointer-events-auto focus-visible:opacity-100",
             isHovered ? "opacity-100" : "pointer-events-none opacity-0",
             copied
               ? "text-green-500"
@@ -171,7 +171,7 @@ function DeleteButton({
           onClick={handleDelete}
           onMouseDown={(e) => e.stopPropagation()}
           className={cn(
-            "absolute -right-6 top-0 z-10 flex size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover transition-opacity focus:opacity-100",
+            "absolute -right-6 top-0 z-10 flex size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover transition-opacity focus-visible:pointer-events-auto focus-visible:opacity-100",
             isHovered ? "opacity-100" : "pointer-events-none opacity-0",
             "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-rose-400"
           )}