Work around Safari bug with absolute positioning relative to table row

Author: benface

website/src/components/Table.tsx

@@ -18,18 +18,18 @@ export const Table = ({ className, children, variant = 'default', ...props }: Ta
     >
       <table
         className={`
-          min-w-full
+          h-max min-w-full overflow-clip
           ${
             isSupportedNetworks
               ? '-:nested-[td]:border-y -:nested-[td:not(:first-child)]:border-l -:nested-[td:not(:last-child)]:border-r -:nested-[td]:border-space-1500'
               : '-:nested-[th,td]:border -:nested-[th,td]:border-space-1500'
           }
           -:nested-[td:has(.highlight-cell)]:bg-purple-1200
-          ${isSupportedNetworks ? '-:nested-[th]:whitespace-nowrap' : '-:nested-[th]:whitespace-normal -:nested-[th]:bg-space-1700'}
+          ${isSupportedNetworks ? '-:nested-[th]:h-8 -:nested-[th]:whitespace-nowrap' : '-:nested-[th]:whitespace-normal -:nested-[th]:bg-space-1700'}
           -:nested-[tr:has(.highlight-row)_td]:bg-purple-1200
           -:nested-[th,td]:px-3.5
           -:nested-[th,td]:py-2.5
-          ${isSupportedNetworks ? '-:nested-[td]:align-middle' : '-:nested-[td]:align-top'}
+          ${isSupportedNetworks ? '-:nested-[td]:h-16 -:nested-[td]:align-middle' : '-:nested-[td]:align-top'}
           -:nested-[th]:font-medium
           mdx-[:is(p,ul,ol):not(:last-child,:is(ul,ol)_*)]:mb-3
           mdx-[ul,ol]:gap-1

website/src/supportedNetworks/components/NetworkRow.tsx

@@ -1,8 +1,7 @@
 import { motion } from 'framer-motion'
-import NextLink from 'next/link'
 import { memo } from 'react'
 
-import { ExperimentalCopyButton, Skeleton } from '@edgeandnode/gds'
+import { ButtonOrLink, ExperimentalCopyButton, Skeleton } from '@edgeandnode/gds'
 import { Check } from '@edgeandnode/gds/icons'
 import { NetworkIcon } from '@edgeandnode/go'
 
@@ -24,7 +23,7 @@ interface NetworkRowProps {
 export const NetworkRow = memo(({ network, locale }: NetworkRowProps) => {
   return (
     <motion.tr
-      className="group h-16 cursor-pointer transition-colors hover:bg-space-1600"
+      className="group/table-row isolate -outline-offset-1 transition hocus-visible-within:bg-space-1600 has-[a:focus-visible]:outline-focus"
       initial={{ opacity: 0, y: 16 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{
@@ -41,33 +40,24 @@ export const NetworkRow = memo(({ network, locale }: NetworkRowProps) => {
       }}
       layoutId={network.id}
     >
-      <td className="static min-w-48">
-        <NextLink
-          href={`/${locale}/supported-networks/${network.id}`}
-          className="absolute inset-0 z-10 flex size-full items-center px-3.5 py-2.5 -outline-offset-2"
-        >
-          <div className="flex items-center gap-2">
+      <td>
+        <ButtonOrLink href={`/${locale}/supported-networks/${network.id}`} className="static outline-none">
+          <span className="flex items-center gap-2">
             {shouldShowSkeleton(network.id) ? (
               <Skeleton borderRadius="FULL" height="20px" width="20px" />
             ) : (
               <NetworkIcon variant={getIconVariant(network.id)} caip2Id={network.caip2Id as any} size={5} />
             )}
-            <span className="text-p14">{network.shortName}</span>
-          </div>
-        </NextLink>
+            <span className="text-body-xsmall">{network.shortName}</span>
+          </span>
+          <span className="absolute inset-y-0 start-0 z-10 w-[1999px]" />
+        </ButtonOrLink>
       </td>
-      <td className="w-48">
-        <div className="flex w-full items-center justify-between gap-2">
-          <span className="text-p14 !mb-0">{network.id}</span>
-          <div className="z-20 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100">
-            <div
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-              }}
-            >
-              <ExperimentalCopyButton size="small" variant="tertiary" value={network.id} />
-            </div>
+      <td>
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-body-xsmall">{network.id}</span>
+          <div className="z-20 shrink-0 opacity-0 transition group-focus-within/table-row:opacity-100 group-hover/table-row:opacity-100">
+            <ExperimentalCopyButton size="small" variant="tertiary" value={network.id} />
           </div>
         </div>
       </td>

website/src/supportedNetworks/components/NetworksTable.tsx

@@ -25,10 +25,10 @@ export const NetworksTable = memo(({ networks, isLoading, locale }: NetworksTabl
     <Table variant="supported-networks">
       <tbody>
         <tr>
-          <th className="w-48">
+          <th className="min-w-46">
             <Text.C10>{t('index.supportedNetworks.tableHeaders.name')}</Text.C10>
           </th>
-          <th className="w-48">
+          <th className="min-w-46">
             <Text.C10>{t('index.supportedNetworks.tableHeaders.id')}</Text.C10>
           </th>
           <th align="center">

website/src/supportedNetworks/components/SkeletonRow.tsx

@@ -4,14 +4,14 @@ import { Skeleton } from '@edgeandnode/gds'
 
 export const SkeletonRow = memo(() => {
   return (
-    <tr className="h-16">
-      <td className="w-48">
+    <tr>
+      <td>
         <div className="flex items-center gap-2">
           <Skeleton borderRadius="FULL" height="20px" width="20px" />
           <Skeleton borderRadius="XS" height="12px" width="100px" />
         </div>
       </td>
-      <td className="w-48">
+      <td>
         <Skeleton borderRadius="XS" height="12px" width="80px" />
       </td>
       <td align="center">