Remove linkBox prop to fix Safari compatibility issues

Author: jnsdls

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

@@ -113,17 +113,15 @@ function TableDemo(props: {
           {invoices.map((invoice) => (
             <TableRow
               key={invoice.invoice}
-              linkBox={props.linkBox}
+              // linkBox={props.linkBox}
               className={cn(
                 props.linkBox && "cursor-pointer hover:bg-accent/50",
               )}
             >
               <TableCell className="font-medium">
                 <Link
                   href={`/invoices/${invoice.invoice}`}
-                  className={cn(
-                    props.linkBox && "before:absolute before:inset-0",
-                  )}
+                  className={cn(props.linkBox && "before:inset-0")}
                 >
                   {invoice.invoice}
                 </Link>

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

@@ -65,18 +65,19 @@ TableFooter.displayName = "TableFooter";
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
   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;
+    // TODO: removed because it breaks in safari
+    // /**
+    //  * 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) => (
+>(({ className, ...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",
+      // linkBox && "relative translate-x-0 translate-y-0",
       className,
     )}
     {...props}

apps/dashboard/src/app/(dashboard)/(bridge)/routes/components/server/routelist-row.tsx

@@ -52,7 +52,7 @@ export async function RouteListRow({
   ]);
 
   return (
-    <TableRow linkBox className="hover:bg-accent/50">
+    <TableRow className="hover:bg-accent/50">
       <TableCell>
         <div className="flex flex-row items-center gap-4">
           <div className="flex items-center gap-1">

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

@@ -39,17 +39,14 @@ export async function ChainListRow({
 }: ChainListRowProps) {
   const chainMetadata = await getChainMetadata(chainId);
   return (
-    <TableRow linkBox className="hover:bg-accent/50">
+    <TableRow className="hover:bg-accent/50">
       {/* Name */}
       <TableCell>
         <div className="flex w-[370px] flex-row items-center gap-4">
           <div className="flex items-center gap-2">
             {favoriteButton && <div className="mr-6"> {favoriteButton} </div>}
             <ChainIcon iconUrl={iconUrl} className="size-6" />
-            <Link
-              href={`/${chainSlug}`}
-              className="group static before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0 before:content-['']"
-            >
+            <Link href={`/${chainSlug}`} className="group static">
               {chainName}
             </Link>
 

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

@@ -75,7 +75,7 @@ export function PublishedContractTable(props: PublishedContractTableProps) {
               href={replaceDeployerAddress(
                 `/${publisherEnsName || cell.row.original.publisher}/${cell.row.original.id}`,
               )}
-              className="whitespace-nowrap text-foreground before:absolute before:inset-0"
+              className="whitespace-nowrap text-foreground"
             >
               {cell.value}
             </Link>
@@ -190,7 +190,7 @@ function ContractTableRow(props: {
   return (
     <>
       <TableRow
-        linkBox
+        // linkBox
         className="cursor-pointer hover:bg-card"
         {...rowProps}
         key={key}

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

@@ -88,7 +88,7 @@ function PartnerRow(props: {
 
   return (
     <TableRow
-      linkBox
+      // linkBox
       className={cn("hover:bg-card", isDeleting && "animate-pulse")}
     >
       <TableCell className="max-w-32 truncate align-center">

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

@@ -164,7 +164,7 @@ function EngineInstanceRow(props: {
     <>
       <TableRow
         className={instance.status === "active" ? "hover:bg-accent/50" : ""}
-        linkBox
+        // linkBox
       >
         <TableCell>
           <div className="flex items-center justify-between">
@@ -230,7 +230,7 @@ function InstanceNameLink(props: {
       ) : (
         <Link
           href={`${props.engineLinkPrefix}/${props.instance.id}`}
-          className="flex items-center text-foreground before:absolute before:inset-0 before:bg-transparent"
+          className="flex items-center text-foreground"
         >
           {name}
         </Link>

apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx

@@ -166,12 +166,12 @@ export function TeamProjectsPage(props: {
                 {paginatedProjects.map((project) => (
                   <TableRow
                     key={project.id}
-                    linkBox
+                    // linkBox
                     className="hover:bg-accent/50"
                   >
                     <TableCell>
                       <Link
-                        className="flex items-center gap-3 before:absolute before:inset-0"
+                        className="flex items-center gap-3"
                         href={`/team/${props.team.slug}/${project.slug}`}
                       >
                         <ProjectAvatar

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

@@ -54,7 +54,7 @@ export async function DeployableContractTable(
           {deployedContractMetadata.map((metadata, i) => {
             return (
               <TableRow
-                linkBox
+                // linkBox
                 className="cursor-pointer hover:bg-card"
                 // biome-ignore lint/suspicious/noArrayIndexKey: static list
                 key={i}
@@ -69,7 +69,7 @@ export async function DeployableContractTable(
                   <Link
                     target="_blank"
                     href={`/contracts/${context}/${encodeURIComponent(metadata.contractId)}`}
-                    className="text-left text-muted-foreground before:absolute before:inset-0"
+                    className="text-left text-muted-foreground"
                   >
                     {metadata.name}
                   </Link>

apps/dashboard/src/components/contract-components/tables/cells.tsx

@@ -17,7 +17,7 @@ import { usePublishedContractsFromDeploy } from "../hooks";
 export const ContractNameCell = memo(function ContractNameCell(props: {
   chainId: string;
   contractAddress: string;
-  linkOverlay?: boolean;
+  // linkOverlay?: boolean;
 }) {
   const chainSlug = useChainSlug(Number(props.chainId));
   const chain = useV5DashboardChain(Number(props.chainId));
@@ -44,7 +44,7 @@ export const ContractNameCell = memo(function ContractNameCell(props: {
             passHref
             className={cn(
               "text-foreground",
-              props.linkOverlay && "before:absolute before:inset-0",
+              // props.linkOverlay && "before:absolute before:inset-0",
             )}
           >
             {v || shortenIfAddress(props.contractAddress)}