From 308a24c8c77eec2113f62e6414e4a200123ad180 Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 11:47:12 +0100
Subject: [PATCH 1/4] fix(webapp): use native selectable row controls

---
 .../app/components/code/TSQLResultsTable.tsx  | 43 +++++++++++++------
 .../route.tsx                                 |  5 +--
 .../route.tsx                                 |  6 ++-
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index c1a627b8db8..fd8ca7cacb3 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -926,19 +926,8 @@ function HeaderCellContent({
   const [isFilterHovered, setIsFilterHovered] = useState(false);
 
   const sortHighlighted = isCellHovered && !isFilterHovered;
-
-  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}
-    >
+  const headerContent = (
+    <>
       {tooltip ? (
         <div
           className={cn("flex min-w-0 flex-1 items-center gap-1 truncate", {
@@ -958,7 +947,6 @@ function HeaderCellContent({
       ) : (
         <span className="min-w-0 flex-1 truncate text-left">{children}</span>
       )}
-      {/* Sort indicator */}
       {canSort && (
         <span
           className={cn(
@@ -975,6 +963,33 @@ 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"
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
index 66fdc0d9646..d0813ea330a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
@@ -340,10 +340,7 @@ export default function Page() {
                             {hasVercelIntegration && (
                               <TableCell isSelected={isSelected}>
                                 {deployment.vercelDeploymentUrl ? (
-                                  <div
-                                    className="-ml-1 flex items-center"
-                                    onClick={(e) => e.stopPropagation()}
-                                  >
+                                  <div className="-ml-1 flex items-center">
                                     <VercelLink
                                       vercelDeploymentUrl={deployment.vercelDeploymentUrl}
                                     />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index a1f332ecab7..25c83f7f5bc 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -2093,7 +2093,9 @@ function VersionsTab({
         const isOverride = v.labels.includes("override");
 
         return (
-          <div
+          <button
+            type="button"
+            aria-pressed={isSelected}
             key={v.id}
             onClick={() => onSelectVersion(v.version)}
             className={cn(
@@ -2143,7 +2145,7 @@ function VersionsTab({
             <span className="shrink-0 text-xs text-text-dimmed">
               <DateTime date={v.createdAt} />
             </span>
-          </div>
+          </button>
         );
       })}
     </div>

From 173a07bebfdaedaae509c7de59c599b00ac6d4dc Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 12:58:31 +0100
Subject: [PATCH 2/4] fix(webapp): preserve selectable row layout and controls

---
 .../app/components/code/TSQLResultsTable.tsx  | 47 +++++++------------
 .../route.tsx                                 |  2 +-
 2 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index fd8ca7cacb3..c0be2281bb9 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -926,8 +926,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", {
@@ -947,6 +960,7 @@ function HeaderCellContent({
       ) : (
         <span className="min-w-0 flex-1 truncate text-left">{children}</span>
       )}
+      {/* Sort indicator */}
       {canSort && (
         <span
           className={cn(
@@ -963,33 +977,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"
@@ -1008,6 +995,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
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index 25c83f7f5bc..cf02be888cf 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/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"

From 09607c3f3f6f71801cdea4f2ef8dbf612c6ee240 Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 14:08:53 +0100
Subject: [PATCH 3/4] fix(webapp): make query result sorting keyboard
 accessible

---
 .../app/components/code/TSQLResultsTable.tsx       | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index c0be2281bb9..b3d5736ada3 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -960,11 +960,17 @@ function HeaderCellContent({
       ) : (
         <span className="min-w-0 flex-1 truncate text-left">{children}</span>
       )}
-      {/* Sort indicator */}
+      {/* The full header remains a pointer target, while this dedicated control makes sorting keyboard-accessible without nesting the tooltip or filter controls. */}
       {canSort && (
-        <span
+        <button
+          type="button"
+          aria-label="Toggle sort"
+          onClick={(event) => {
+            event.stopPropagation();
+            onSortClick?.(event);
+          }}
           className={cn(
-            "shrink-0 transition-colors",
+            "shrink-0 rounded transition-colors focus-custom",
             sortHighlighted ? "text-text-bright" : "text-text-dimmed"
           )}
         >
@@ -975,7 +981,7 @@ function HeaderCellContent({
           ) : (
             <ChevronUpDownIcon className="size-4" />
           )}
-        </span>
+        </button>
       )}
       {onFilterClick && (
         <button

From 61469aea7fc9241964987bc282b24f65332f462f Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 14:38:36 +0100
Subject: [PATCH 4/4] fix(webapp): stop the column info tooltip triggering
 column sort

Clicking the info-icon tooltip in a sortable column header still
toggled the column sort because the click bubbled up to the header's
click handler, unlike the dedicated sort and filter buttons, which
already stop propagation. Stop the click from bubbling past the
tooltip so hovering or clicking the info icon no longer changes the
sort order.
---
 apps/webapp/app/components/code/TSQLResultsTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index b3d5736ada3..c3ad0ccdf0e 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -948,7 +948,7 @@ function HeaderCellContent({
           })}
         >
           <span className="truncate text-left">{children}</span>
-          <span className="flex shrink-0">
+          <span className="flex shrink-0" onClick={(event) => event.stopPropagation()}>
             <InfoIconTooltip
               content={tooltip}
               contentClassName="normal-case tracking-normal"