💄 (editor) Fix some overflow issues with long variable names

apps/builder/src/components/inputs/VariableSearchInput.tsx

@@ -12,6 +12,7 @@ import {
   PopoverAnchor,
   Portal,
   Tag,
+  Text,
 } from '@chakra-ui/react'
 import { EditIcon, PlusIcon, TrashIcon } from '@/components/icons'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider/TypebotProvider'
@@ -210,7 +211,9 @@ export const VariableSearchInput = ({
               >
                 Create
                 <Tag colorScheme="orange" ml="1">
+                  <Text noOfLines={0} display="block">
                     {inputValue}
+                  </Text>
                 </Tag>
               </Button>
             )}
@@ -240,7 +243,10 @@ export const VariableSearchInput = ({
                       }
                       transition="none"
                     >
+                      <Text noOfLines={0} display="block" pr="2">
                         {item.name}
+                      </Text>
+
                       <HStack>
                         <IconButton
                           icon={<EditIcon />}

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent.tsx

@@ -15,7 +15,7 @@ export const WithVariableContent = ({ block }: Props) => {
   )?.name
 
   return (
-    <Text>
+    <Text w="calc(100% - 25px)">
       Collect{' '}
       <chakra.span
         bgColor="orange.400"

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

@@ -29,9 +29,7 @@ const Cell = ({
       py="2"
       borderWidth={rowIndex === 0 ? '0 1px 1px 1px' : '1px'}
       borderColor={useColorModeValue('gray.200', 'gray.700')}
-      whiteSpace="nowrap"
-      wordBreak="normal"
-      overflow="hidden"
+      whiteSpace="pre-wrap"
       pos="relative"
       style={{
         minWidth: size,

apps/builder/src/features/results/components/ResultsTable/ColumnSettings.tsx

@@ -77,7 +77,6 @@ export const ColumnSettings = ({
   }
 
   return (
-    <Stack>
     <Stack>
       <Text fontWeight="semibold" fontSize="sm">
         Shown in table:
@@ -108,7 +107,6 @@ export const ColumnSettings = ({
         </Portal>
       </DndContext>
     </Stack>
-    </Stack>
   )
 }
 
@@ -147,7 +145,7 @@ const SortableColumns = ({
       opacity={isDragging || isHidden ? 0.5 : 1}
       {...attributes}
     >
-      <HStack>
+      <HStack overflow="hidden">
         <IconButton
           size="sm"
           cursor="grab"