fix(webapp): hide copy controls after pointer exit

Author: carderne

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"

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"

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"

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"
           )}