fix(results): 🐛 Ignore cell content for column size

apps/builder/components/results/ResultsTable/Cell.tsx

@@ -0,0 +1,66 @@
+import { chakra, Fade, Button } from '@chakra-ui/react'
+import { Cell as CellProps } from '@tanstack/react-table'
+import { ExpandIcon } from 'assets/icons'
+import { memo } from 'react'
+
+type Props = {
+  cell: CellProps<any>
+  size: number
+  isExpandButtonVisible: boolean
+  cellIndex: number
+  onExpandButtonClick: () => void
+}
+
+const Cell = ({
+  cell,
+  size,
+  isExpandButtonVisible,
+  cellIndex,
+  onExpandButtonClick,
+}: Props) => {
+  return (
+    <chakra.td
+      key={cell.id}
+      px="4"
+      py="2"
+      border="1px"
+      borderColor="gray.200"
+      whiteSpace="nowrap"
+      wordBreak="normal"
+      overflow="hidden"
+      pos="relative"
+      style={{
+        minWidth: size,
+        maxWidth: size,
+      }}
+    >
+      {cell.renderCell()}
+      <chakra.span
+        pos="absolute"
+        top="0"
+        right={2}
+        h="full"
+        display="inline-flex"
+        alignItems="center"
+      >
+        <Fade unmountOnExit in={isExpandButtonVisible && cellIndex === 1}>
+          <Button
+            leftIcon={<ExpandIcon />}
+            shadow="lg"
+            size="xs"
+            onClick={onExpandButtonClick}
+          >
+            Open
+          </Button>
+        </Fade>
+      </chakra.span>
+    </chakra.td>
+  )
+}
+
+export default memo(
+  Cell,
+  (prev, next) =>
+    prev.size === next.size &&
+    prev.isExpandButtonVisible === next.isExpandButtonVisible
+)

apps/builder/components/results/ResultsTable/ResultsTable.tsx

@@ -23,7 +23,7 @@ import { ColumnSettingsButton } from './ColumnsSettingsButton'
 import { useTypebot } from 'contexts/TypebotContext'
 import { useDebounce } from 'use-debounce'
 import { ResultsActionButtons } from './ResultsActionButtons'
-import Row from './Row'
+import { Row } from './Row'
 import { HeaderRow } from './HeaderRow'
 
 type RowType = {

apps/builder/components/results/ResultsTable/Row.tsx

@@ -1,7 +1,6 @@
-import React, { memo, useState } from 'react'
+import React, { useState } from 'react'
 import { Row as RowProps } from '@tanstack/react-table'
-import { Button, chakra, Fade } from '@chakra-ui/react'
+import Cell from './Cell'
-import { ExpandIcon } from 'assets/icons'
 
 type Props = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11,7 +10,7 @@ type Props = {
   onExpandButtonClick: () => void
 }
 
-const Row = ({ row, bottomElement, onExpandButtonClick }: Props) => {
+export const Row = ({ row, bottomElement, onExpandButtonClick }: Props) => {
   const [isExpandButtonVisible, setIsExpandButtonVisible] = useState(false)
 
   const showExpandButton = () => setIsExpandButtonVisible(true)
@@ -29,45 +28,15 @@ const Row = ({ row, bottomElement, onExpandButtonClick }: Props) => {
       onMouseLeave={hideExpandButton}
     >
       {row.getVisibleCells().map((cell, cellIndex) => (
-        <chakra.td
+        <Cell
           key={cell.id}
-          px="4"
+          cell={cell}
-          py="2"
+          size={cell.column.getSize()}
-          border="1px"
+          isExpandButtonVisible={isExpandButtonVisible}
-          borderColor="gray.200"
+          cellIndex={cellIndex}
-          whiteSpace="nowrap"
+          onExpandButtonClick={onExpandButtonClick}
-          wordBreak="normal"
+        />
-          overflow="hidden"
-          pos="relative"
-        >
-          {cell.renderCell()}
-          <chakra.span
-            pos="absolute"
-            top="0"
-            right={2}
-            h="full"
-            display="inline-flex"
-            alignItems="center"
-          >
-            <Fade unmountOnExit in={isExpandButtonVisible && cellIndex === 1}>
-              <Button
-                leftIcon={<ExpandIcon />}
-                shadow="lg"
-                size="xs"
-                onClick={onExpandButtonClick}
-              >
-                Open
-              </Button>
-            </Fade>
-          </chakra.span>
-        </chakra.td>
       ))}
     </tr>
   )
 }
-
-export default memo(
-  Row,
-  (prev, next) =>
-    prev.row.id === next.row.id && prev.isSelected === next.isSelected
-)