fix(tables): preserve reference preview scrolling and clipping

Author: j15z

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/reference-row-preview.test.tsx

@@ -141,10 +141,21 @@ describe('ReferenceRowPreview', () => {
     const subtable = container.querySelector('[role="table"]')
     expect(subtable?.className).toContain('w-full')
     expect(subtable?.className).toContain('h-full')
+    expect(subtable?.className).toContain('cursor-default')
+    expect(subtable?.className).toContain('select-none')
     expect(subtable?.className).toContain('grid-rows-2')
     expect(subtable?.querySelectorAll('[role="row"]')).toHaveLength(2)
     expect(subtable?.querySelectorAll('[role="columnheader"]')).toHaveLength(2)
     expect(subtable?.querySelectorAll('[role="cell"]')).toHaveLength(2)
+    const dataValueWrappers = subtable?.querySelectorAll('[role="cell"] > div') ?? []
+    expect(
+      Array.from(dataValueWrappers).every(
+        (node) =>
+          node.classList.contains('w-full') &&
+          node.classList.contains('min-w-0') &&
+          node.classList.contains('overflow-clip')
+      )
+    ).toBe(true)
     const subtableViewport = container.querySelector('.overscroll-x-contain')
     expect(subtableViewport?.className).toContain('overflow-x-auto')
     expect(subtableViewport?.className).toContain('overflow-y-hidden')

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/reference-row-preview.tsx

@@ -114,7 +114,10 @@ export const ReferenceRowPreview = memo(function ReferenceRowPreview({
     )
   } else {
     content = (
-      <div role='table' className='grid h-full w-full min-w-max grid-rows-2 text-small'>
+      <div
+        role='table'
+        className='grid h-full w-full min-w-max cursor-default select-none grid-rows-2 text-small'
+      >
         <div role='row' className='flex min-w-max'>
           {columns.map((column) => (
             <div
@@ -140,7 +143,7 @@ export const ReferenceRowPreview = memo(function ReferenceRowPreview({
               key={column.key}
               className='flex w-40 min-w-40 max-w-60 items-center border-[var(--border)] border-r px-2 text-[var(--text-primary)]'
             >
-              <div className='max-w-56 overflow-hidden text-ellipsis whitespace-nowrap'>
+              <div className='w-full min-w-0 max-w-56 overflow-clip text-ellipsis whitespace-nowrap'>
                 <CellContent
                   value={row.data[column.key]}
                   column={column}