From dec2c4c4e2e37cab2668b7f3a3fc27c642cef112 Mon Sep 17 00:00:00 2001
From: Mathias Fredriksson <mafredri@gmail.com>
Date: Tue, 4 Nov 2025 16:16:43 +0200
Subject: [PATCH] fix(site): fix task table links in Safari (#20663)

This change makes the TableRow clickable rather than having an
absolutely positioned RouterLink. In Safari the entire table was broken
because all links spanned across the whole table, and the bottom most
row shadowed all others, resulting in only the bottom row being
highlighted and all rows leading to the bottom most task.
---
 site/src/pages/TasksPage/TasksTable.tsx | 36 ++++++++++++++-----------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/site/src/pages/TasksPage/TasksTable.tsx b/site/src/pages/TasksPage/TasksTable.tsx
index be0700c815..028386d243 100644
--- a/site/src/pages/TasksPage/TasksTable.tsx
+++ b/site/src/pages/TasksPage/TasksTable.tsx
@@ -23,11 +23,12 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
+import { useClickableTableRow } from "hooks";
 import { RotateCcwIcon, TrashIcon } from "lucide-react";
 import { TaskDeleteDialog } from "modules/tasks/TaskDeleteDialog/TaskDeleteDialog";
 import { TaskStatus } from "modules/tasks/TaskStatus/TaskStatus";
 import { type FC, type ReactNode, useState } from "react";
-import { Link as RouterLink } from "react-router";
+import { useNavigate } from "react-router";
 import { relativeTime } from "utils/time";
 
 type TasksTableProps = {
@@ -116,24 +117,27 @@ type TaskRowProps = { task: Task };
 const TaskRow: FC<TaskRowProps> = ({ task }) => {
 	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 	const templateDisplayName = task.template_display_name ?? task.template_name;
+	const navigate = useNavigate();
+
+	const taskPageLink = `/tasks/${task.owner_name}/${task.id}`;
+	// Discard role, breaks Chromatic.
+	const { role, ...clickableRowProps } = useClickableTableRow({
+		onClick: () => navigate(taskPageLink),
+	});
 
 	return (
 		<>
-			<TableRow className="relative" hover>
+			<TableRow
+				key={task.id}
+				data-testid={`task-${task.id}`}
+				{...clickableRowProps}
+			>
 				<TableCell>
 					<AvatarData
 						title={
-							<>
-								<span className="block max-w-[520px] overflow-hidden text-ellipsis whitespace-nowrap">
-									{task.initial_prompt}
-								</span>
-								<RouterLink
-									to={`/tasks/${task.owner_name}/${task.id}`}
-									className="absolute inset-0"
-								>
-									<span className="sr-only">Access task</span>
-								</RouterLink>
-							</>
+							<span className="block max-w-[520px] overflow-hidden text-ellipsis whitespace-nowrap">
+								{task.initial_prompt}
+							</span>
 						}
 						subtitle={templateDisplayName}
 						avatar={
@@ -171,8 +175,10 @@ const TaskRow: FC<TaskRowProps> = ({ task }) => {
 								<Button
 									size="icon"
 									variant="outline"
-									className="relative z-50"
-									onClick={() => setIsDeleteDialogOpen(true)}
+									onClick={(e) => {
+										e.stopPropagation();
+										setIsDeleteDialogOpen(true);
+									}}
 								>
 									<span className="sr-only">Delete task</span>
 									<TrashIcon />