From 6705d15097c8f370144def95ef8dc55ee5efb0a1 Mon Sep 17 00:00:00 2001
From: Thomas Lathuiliere <thomas@checkmarble.com>
Date: Mon, 20 May 2024 16:45:30 +0200
Subject: [PATCH] fix(table): issue with Safari browser <td> relative position

---
 .../src/components/Data/TableModelNode.tsx    | 154 +++++++++---------
 .../components/Decisions/DecisionsList.tsx    |   8 +-
 .../src/components/Decisions/PivotDetail.tsx  |   2 +-
 packages/ui-design-system/src/Table/Table.tsx |   7 +-
 4 files changed, 88 insertions(+), 83 deletions(-)

diff --git a/packages/app-builder/src/components/Data/TableModelNode.tsx b/packages/app-builder/src/components/Data/TableModelNode.tsx
index 5773731b..89ccc314 100644
--- a/packages/app-builder/src/components/Data/TableModelNode.tsx
+++ b/packages/app-builder/src/components/Data/TableModelNode.tsx
@@ -115,7 +115,7 @@ export function TableModelNode({ data }: NodeProps<TableModelNodeData>) {
       columnHelper.group({
         id: 'name',
         header: () => (
-          <div className="bg-grey-02 border-grey-50 flex justify-between gap-2 border-b p-4">
+          <div className="flex justify-between gap-2 p-4">
             <div className="flex flex-col gap-2 text-left">
               <span className="text-grey-100 text-[30px]">{data.name}</span>
               <FormatDescription description={data.description || ''} />
@@ -194,83 +194,87 @@ export function TableModelNode({ data }: NodeProps<TableModelNodeData>) {
   });
 
   return (
-    <table
-      className={clsx(
-        'bg-grey-00 border-grey-50 isolate table-auto border-collapse rounded-xl border',
-        displayPivot && !isTablePartOfPivot(data.original.id) && 'opacity-20',
-      )}
-    >
-      <thead>
-        {table.getHeaderGroups().map((headerGroup) => (
-          <tr key={headerGroup.id}>
-            {headerGroup.headers.map((header) => (
-              <th key={header.id} colSpan={header.colSpan}>
-                {flexRender(
-                  header.column.columnDef.header,
-                  header.getContext(),
-                )}
-              </th>
-            ))}
-          </tr>
-        ))}
-      </thead>
-      <tbody className="border-grey-50 border">
-        {table.getRowModel().rows.map((row) => {
-          const visibleCells = row.getVisibleCells();
-          return (
+    <div className="border-grey-50 bg-grey-00 overflow-hidden rounded-xl border">
+      <table
+        className={clsx(
+          'isolate table-auto border-collapse',
+          displayPivot && !isTablePartOfPivot(data.original.id) && 'opacity-20',
+        )}
+      >
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr
-              key={row.id}
-              className={clsx(
-                'border-grey-50 relative border',
-                canEditDataModel && 'hover:bg-purple-10 group',
-                displayPivot &&
-                  isFieldPartOfPivot(row.original.id) &&
-                  'bg-purple-10',
-                displayPivot &&
-                  !isFieldPartOfPivot(row.original.id) &&
-                  'opacity-20',
-              )}
+              key={headerGroup.id}
+              className="bg-grey-02 border-b-grey-25 border-b"
             >
-              {visibleCells.map((cell, index) => {
-                let sourceHandle, targetHandle;
-                if (index === 0) {
-                  sourceHandle = (
-                    <Handle
-                      type="target"
-                      id={row.original.name}
-                      position={Position.Left}
-                      // For now, we don't want to show the handle or allow connections
-                      style={{ background: 'transparent', border: 'none' }}
-                      isConnectable={false}
-                    />
-                  );
-                }
-                if (index === visibleCells.length - 1) {
-                  targetHandle = (
-                    <Handle
-                      type="source"
-                      id={row.original.name}
-                      position={Position.Right}
-                      // For now, we don't want to show the handle or allow connections
-                      style={{ background: 'transparent', border: 'none' }}
-                      isConnectable={false}
-                    />
-                  );
-                }
-
-                return (
-                  <td key={cell.id} className="max-w-96 p-2">
-                    {sourceHandle}
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    {targetHandle}
-                  </td>
-                );
-              })}
+              {/* This is the handle for the left side of the table */}
+              <th></th>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id} colSpan={header.colSpan}>
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext(),
+                  )}
+                </th>
+              ))}
+              {/* This is the handle for the right side of the table */}
+              <th></th>
             </tr>
-          );
-        })}
-      </tbody>
-    </table>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row) => {
+            const visibleCells = row.getVisibleCells();
+            return (
+              <tr
+                key={row.id}
+                className={clsx(
+                  'border-t-grey-25 relative scale-100 border-t',
+                  canEditDataModel && 'hover:bg-purple-10 group',
+                  displayPivot &&
+                    isFieldPartOfPivot(row.original.id) &&
+                    'bg-purple-10',
+                  displayPivot &&
+                    !isFieldPartOfPivot(row.original.id) &&
+                    'opacity-20',
+                )}
+              >
+                <td className="relative">
+                  <Handle
+                    type="target"
+                    id={row.original.name}
+                    position={Position.Left}
+                    // For now, we don't want to show the handle or allow connections
+                    style={{ background: 'transparent', border: 'none' }}
+                    isConnectable={false}
+                  />
+                </td>
+                {visibleCells.map((cell) => {
+                  return (
+                    <td key={cell.id} className="max-w-96 p-2 ">
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  );
+                })}
+                <td className="relative">
+                  <Handle
+                    type="source"
+                    id={row.original.name}
+                    position={Position.Right}
+                    // For now, we don't want to show the handle or allow connections
+                    style={{ background: 'transparent', border: 'none' }}
+                    isConnectable={false}
+                  />
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
   );
 }
 
diff --git a/packages/app-builder/src/components/Decisions/DecisionsList.tsx b/packages/app-builder/src/components/Decisions/DecisionsList.tsx
index 7c7f11cb..c2e4d9ae 100644
--- a/packages/app-builder/src/components/Decisions/DecisionsList.tsx
+++ b/packages/app-builder/src/components/Decisions/DecisionsList.tsx
@@ -115,7 +115,7 @@ export function DecisionsList({
               ),
               cell: ({ row }) => (
                 <Checkbox
-                  className="isolate"
+                  className="relative"
                   checked={row.getIsSelected()}
                   onClick={(e) => {
                     e.stopPropagation();
@@ -152,7 +152,7 @@ export function DecisionsList({
               scenarioId: fromUUID(row.original.scenario.id),
             })}
             onClick={(e) => e.stopPropagation()}
-            className="hover:text-purple-120 focus:text-purple-120 isolate font-semibold capitalize text-purple-100 hover:underline focus:underline"
+            className="hover:text-purple-120 focus:text-purple-120 relative font-semibold capitalize text-purple-100 hover:underline focus:underline"
           >
             {getValue()}
           </Link>
@@ -169,7 +169,7 @@ export function DecisionsList({
               iterationId: fromUUID(row.original.scenario.scenarioIterationId),
             })}
             onClick={(e) => e.stopPropagation()}
-            className="hover:text-purple-120 focus:text-purple-120 isolate font-semibold capitalize text-purple-100 hover:underline focus:underline"
+            className="hover:text-purple-120 focus:text-purple-120 relative font-semibold capitalize text-purple-100 hover:underline focus:underline"
           >
             {`V${getValue()}`}
           </Link>
@@ -196,7 +196,7 @@ export function DecisionsList({
                   caseId: fromUUID(row.original.case.id),
                 })}
                 onClick={(e) => e.stopPropagation()}
-                className="hover:text-purple-120 focus:text-purple-120 isolate font-semibold capitalize text-purple-100 hover:underline focus:underline"
+                className="hover:text-purple-120 focus:text-purple-120 relative font-semibold capitalize text-purple-100 hover:underline focus:underline"
               >
                 {getValue()}
               </Link>
diff --git a/packages/app-builder/src/components/Decisions/PivotDetail.tsx b/packages/app-builder/src/components/Decisions/PivotDetail.tsx
index 00adeb54..296a9c34 100644
--- a/packages/app-builder/src/components/Decisions/PivotDetail.tsx
+++ b/packages/app-builder/src/components/Decisions/PivotDetail.tsx
@@ -126,7 +126,7 @@ function PivotList({ pivotValues }: Pick<PivotDetailProps, 'pivotValues'>) {
           >
             <Link
               to={getDecisionRoute({ pivotValue: getValue() })}
-              className="hover:text-purple-120 focus:text-purple-120 isolate font-semibold capitalize text-purple-100 hover:underline focus:underline"
+              className="hover:text-purple-120 focus:text-purple-120 relative font-semibold capitalize text-purple-100 hover:underline focus:underline"
             >
               {getValue()}
             </Link>
diff --git a/packages/ui-design-system/src/Table/Table.tsx b/packages/ui-design-system/src/Table/Table.tsx
index d432948a..700ff35b 100644
--- a/packages/ui-design-system/src/Table/Table.tsx
+++ b/packages/ui-design-system/src/Table/Table.tsx
@@ -128,14 +128,14 @@ interface TableProps<TData extends RowData> extends TableOptions<TData> {
   /**
    * Transform the row into a link.
    *
-   * Be aware you need to use 'isolate' class on other interactable cell elements to avoid z-index issues.
+   * Be aware you need to use 'relative' class on other interactable cell elements to create a new stacking context and avoid z-index issues.
    *
    * @example
    *  rowLink={(row) => <Link to={`/row/${row.id}`}>{row.name}</Link>}
    *  ...
    *   columnHelper.accessor({
    *     ...
-   *     cell: ({ getValue }) => <Checkbox className="isolate">{getValue()}</Checkbox>,
+   *     cell: ({ getValue }) => <Checkbox className="relative">{getValue()}</Checkbox>,
    *    }),
    */
   rowLink?: (row: TData) => JSX.Element;
@@ -253,7 +253,8 @@ function Row<TData extends RowData>({
   ...props
 }: Omit<React.ComponentProps<'tr'>, 'children'> & { row: Row<TData> }) {
   return (
-    <tr className={clsx('group relative h-16', className)} {...props}>
+    // Scale-100 is a hack to bypass relative bug on <tr /> for Safari https://bugs.webkit.org/show_bug.cgi?id=240961
+    <tr className={clsx('group relative h-16 scale-100', className)} {...props}>
       {row.getVisibleCells().map((cell) => {
         const context = cell.getContext();
         if (context.column.id === internalRowLink) {