Fix position:relative not supported on <tr> in webkit

Author: MananTank

apps/dashboard/src/@/components/ui/table.stories.tsx

@@ -9,7 +9,9 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import type { Meta, StoryObj } from "@storybook/react";
+import Link from "next/link";
 import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { cn } from "../../lib/utils";
 import { Badge } from "./badge";
 
 const meta = {
@@ -41,6 +43,10 @@ function Component() {
         <TableDemo />
       </BadgeContainer>
 
+      <BadgeContainer label="Clickable Row">
+        <TableDemo linkBox />
+      </BadgeContainer>
+
       <BadgeContainer label="With Footer">
         <TableDemo footer />
       </BadgeContainer>
@@ -90,6 +96,7 @@ const invoices: Invoice[] = [
 
 function TableDemo(props: {
   footer?: boolean;
+  linkBox?: boolean;
 }) {
   return (
     <TableContainer>
@@ -104,8 +111,21 @@ function TableDemo(props: {
         </TableHeader>
         <TableBody>
           {invoices.map((invoice) => (
-            <TableRow key={invoice.invoice}>
-              <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableRow
+              key={invoice.invoice}
+              linkBox={props.linkBox}
+              className={cn(props.linkBox && "cursor-pointer hover:bg-muted")}
+            >
+              <TableCell className="font-medium">
+                <Link
+                  href={`/invoices/${invoice.invoice}`}
+                  className={cn(
+                    props.linkBox && "before:absolute before:inset-0",
+                  )}
+                >
+                  {invoice.invoice}
+                </Link>
+              </TableCell>
               <TableCell>
                 <Badge>{invoice.paymentStatus}</Badge>
               </TableCell>

apps/dashboard/src/@/components/ui/table.tsx

@@ -63,12 +63,19 @@ TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
+  React.HTMLAttributes<HTMLTableRowElement> & {
+    /**
+     * Contain the absolutely position elements inside the row with position:relative + transform:translate(0)
+     * transform:translate(0) is required because position:relative on tr element does not work on webkit
+     */
+    linkBox?: boolean;
+  }
+>(({ className, linkBox, ...props }, ref) => (
   <tr
     ref={ref}
     className={cn(
       "border-border border-b last:border-0 data-[state=selected]:bg-muted",
+      linkBox && "relative translate-x-0 translate-y-0",
       className,
     )}
     {...props}

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-row.tsx

@@ -39,7 +39,7 @@ export async function ChainListRow({
 }: ChainListRowProps) {
   const chainMetadata = await getChainMetadata(chainId);
   return (
-    <TableRow className="relative hover:bg-muted/50">
+    <TableRow linkBox className="hover:bg-muted/50">
       <TableCell>{favoriteButton}</TableCell>
       {/* Name */}
       <TableCell>

apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/components/PublishedContractTable.tsx

@@ -190,7 +190,8 @@ function ContractTableRow(props: {
   return (
     <>
       <TableRow
-        className="relative cursor-pointer hover:bg-muted/50"
+        linkBox
+        className="cursor-pointer hover:bg-muted/50"
         {...rowProps}
         key={key}
       >

apps/dashboard/src/app/(dashboard)/trending/components/trending-table.tsx

@@ -75,7 +75,8 @@ export function TrendingContractSection(props: {
             <TableBody>
               {props.topContracts.map((contract, index) => (
                 <TableRow
-                  className="relative hover:bg-muted/50"
+                  linkBox
+                  className="hover:bg-muted/50"
                   key={`${contract.chainMetadata.chainId}${contract.contractAddress}${index}`}
                 >
                   {/* Rank */}

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/partners-table.tsx

@@ -78,10 +78,8 @@ function PartnerRow(props: {
 
   return (
     <TableRow
-      className={cn(
-        "relative hover:bg-muted/50",
-        isDeleting && "animate-pulse",
-      )}
+      linkBox
+      className={cn("hover:bg-muted/50", isDeleting && "animate-pulse")}
     >
       <TableCell className="max-w-32 truncate align-center">
         {props.partner.name}

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.tsx

@@ -168,7 +168,8 @@ export const EngineInstancesTable: React.FC<EngineInstancesTableProps> = ({
             isDestructive: true,
           },
         ]}
-        bodyRowClassName="hover:bg-muted/50 relative"
+        bodyRowClassName="hover:bg-muted/50"
+        bodyRowLinkBox
       />
 
       {instanceToUpdate && (

apps/dashboard/src/components/contract-components/contract-table/index.tsx

@@ -54,7 +54,8 @@ export async function DeployableContractTable(
           {deployedContractMetadata.map((metadata, i) => {
             return (
               <TableRow
-                className="relative cursor-pointer hover:bg-muted/50"
+                linkBox
+                className="cursor-pointer hover:bg-muted/50"
                 // biome-ignore lint/suspicious/noArrayIndexKey: static list
                 key={i}
               >

apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx

@@ -358,7 +358,8 @@ const ContractTableRow = memo(({ row }: { row: Row<BasicContract> }) => {
     <TableRow
       {...rowProps}
       role="group"
-      className="relative cursor-pointer hover:bg-muted/50"
+      linkBox
+      className="cursor-pointer hover:bg-muted/50"
     >
       {row.cells.map((cell, cellIndex) => {
         return (

apps/dashboard/src/components/shared/TWTable.tsx

@@ -55,6 +55,7 @@ type TWTableProps<TRowData> = {
   };
   title: string;
   bodyRowClassName?: string;
+  bodyRowLinkBox?: boolean;
 };
 
 export function TWTable<TRowData>(tableProps: TWTableProps<TRowData>) {
@@ -174,6 +175,7 @@ export function TWTable<TRowData>(tableProps: TWTableProps<TRowData>) {
                     }
                   : {})}
                 className={tableProps.bodyRowClassName}
+                linkBox={tableProps.bodyRowLinkBox}
               >
                 {row.getVisibleCells().map((cell) => {
                   return (