Skip to content

fix(webapp): use native selectable row controls #4700

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
carderne merged 4 commits into from
Aug 19, 2026
+21 −12
Merged

fix(webapp): use native selectable row controls #4700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
308a24c
fix(webapp): use native selectable row controls
carderne Aug 19, 2026
173a07b
fix(webapp): preserve selectable row layout and controls
carderne Aug 19, 2026
09607c3
fix(webapp): make query result sorting keyboard accessible
carderne Aug 19, 2026
61469ae
fix(webapp): stop the column info tooltip triggering column sort
carderne Aug 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 15 additions & 5 deletions apps/webapp/app/components/code/TSQLResultsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -927,6 +927,8 @@ function HeaderCellContent({

const sortHighlighted = isCellHovered && !isFilterHovered;

/* 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. */
Comment thread
carderne marked this conversation as resolved.
return (
<div
className={cn(
Expand All @@ -946,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"
Expand All @@ -958,11 +960,17 @@ function HeaderCellContent({
) : (
Comment thread
carderne marked this conversation as resolved.
<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"
)}
>
Expand All @@ -973,7 +981,7 @@ function HeaderCellContent({
) : (
<ChevronUpDownIcon className="size-4" />
)}
</span>
</button>
)}
{onFilterClick && (
<button
Expand All @@ -993,6 +1001,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
Expand Down
5 changes: 1 addition & 4 deletions ...es/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand Down
8 changes: 5 additions & 3 deletions ...orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2093,11 +2093,13 @@ 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(
Comment thread
carderne marked this conversation as resolved.
"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"
Expand Down Expand Up @@ -2143,7 +2145,7 @@ function VersionsTab({
<span className="shrink-0 text-xs text-text-dimmed">
<DateTime date={v.createdAt} />
</span>
</div>
</button>
);
})}
</div>
Expand Down
Loading