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

@@ -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 />