fix(webapp): preserve selectable row layout and controls

Author: carderne

apps/webapp/app/components/code/TSQLResultsTable.tsx

@@ -928,8 +928,21 @@ function HeaderCellContent({
   const [isFilterHovered, setIsFilterHovered] = useState(false);
 
   const sortHighlighted = isCellHovered && !isFilterHovered;
-  const headerContent = (
-    <>
+
+  /* oxlint-disable jsx-a11y/click-events-have-key-events -- The sortable header contains separate tooltip and filter controls that cannot be nested in a button. */
+  /* oxlint-disable jsx-a11y/no-static-element-interactions -- Preserve the existing full-header pointer target rather than nesting its child controls. */
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center gap-1 overflow-hidden bg-background-bright py-2 pl-2 pr-3",
+        "font-mono text-xs font-medium text-text-bright",
+        alignment === "right" && "justify-end",
+        canSort && "cursor-pointer select-none"
+      )}
+      onMouseEnter={() => setIsCellHovered(true)}
+      onMouseLeave={() => setIsCellHovered(false)}
+      onClick={onSortClick}
+    >
       {tooltip ? (
         <div
           className={cn("flex min-w-0 flex-1 items-center gap-1 truncate", {
@@ -949,6 +962,7 @@ function HeaderCellContent({
       ) : (
         <span className="min-w-0 flex-1 truncate text-left">{children}</span>
       )}
+      {/* Sort indicator */}
       {canSort && (
         <span
           className={cn(
@@ -965,33 +979,6 @@ function HeaderCellContent({
           )}
         </span>
       )}
-    </>
-  );
-
-  return (
-    <div
-      className={cn(
-        "flex w-full items-center gap-1 overflow-hidden bg-background-bright py-2 pl-2 pr-3",
-        "font-mono text-xs font-medium text-text-bright",
-        alignment === "right" && "justify-end"
-      )}
-      onMouseEnter={() => setIsCellHovered(true)}
-      onMouseLeave={() => setIsCellHovered(false)}
-    >
-      {canSort ? (
-        <button
-          type="button"
-          onClick={onSortClick}
-          className={cn(
-            "flex min-w-0 flex-1 cursor-pointer select-none items-center gap-1 overflow-hidden text-left focus-custom",
-            alignment === "right" && "justify-end"
-          )}
-        >
-          {headerContent}
-        </button>
-      ) : (
-        headerContent
-      )}
       {onFilterClick && (
         <button
           type="button"
@@ -1010,6 +997,8 @@ function HeaderCellContent({
     </div>
   );
 }
+/* oxlint-enable jsx-a11y/click-events-have-key-events */
+/* oxlint-enable jsx-a11y/no-static-element-interactions */
 
 /**
  * Filter input cell for the filter row

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx

@@ -2099,7 +2099,7 @@ function VersionsTab({
             key={v.id}
             onClick={() => onSelectVersion(v.version)}
             className={cn(
-              "flex cursor-pointer items-center gap-3 px-3 py-3 text-sm transition",
+              "flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-left text-sm transition focus-custom",
               isSelected
                 ? "bg-indigo-500/10 hover:bg-indigo-500/[0.07]"
                 : "hover:bg-background-hover"