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.

Author: carderne

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

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

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>
     );