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

baptisteArno · Mar 6, 2023 · f527df8 · f527df8 · vercel · Mar 6, 2023
1 parent 26e5d9c
commit f527df8
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 36 deletions.
diff --git a/apps/builder/src/components/inputs/VariableSearchInput.tsx b/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">
-                  {inputValue}
+                  <Text noOfLines={0} display="block">
+                    {inputValue}
+                  </Text>
                 </Tag>
               </Button>
             )}
@@ -240,7 +243,10 @@ export const VariableSearchInput = ({
                       }
                       transition="none"
                     >
-                      {item.name}
+                      <Text noOfLines={0} display="block" pr="2">
+                        {item.name}
+                      </Text>
+
                       <HStack>
                         <IconButton
                           icon={<EditIcon />}

diff --git a/...er/src/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent.tsx b/...er/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"

diff --git a/apps/builder/src/features/results/components/ResultsTable/Cell.tsx b/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,

diff --git a/apps/builder/src/features/results/components/ResultsTable/ColumnSettings.tsx b/apps/builder/src/features/results/components/ResultsTable/ColumnSettings.tsx
@@ -78,36 +78,34 @@ export const ColumnSettings = ({
 
   return (
     <Stack>
-      <Stack>
-        <Text fontWeight="semibold" fontSize="sm">
-          Shown in table:
-        </Text>
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragStart={handleDragStart}
-          onDragEnd={handleDragEnd}
+      <Text fontWeight="semibold" fontSize="sm">
+        Shown in table:
+      </Text>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={columnOrder}
+          strategy={verticalListSortingStrategy}
         >
-          <SortableContext
-            items={columnOrder}
-            strategy={verticalListSortingStrategy}
-          >
-            {sortedHeader.map((header) => (
-              <SortableColumns
-                key={header.id}
-                header={header}
-                onEyeClick={onEyeClick}
-                hiddenHeaders={hiddenHeaders}
-              />
-            ))}
-          </SortableContext>
-          <Portal>
-            <DragOverlay dropAnimation={{ duration: 0 }}>
-              {draggingColumnId ? <Flex /> : null}
-            </DragOverlay>
-          </Portal>
-        </DndContext>
-      </Stack>
+          {sortedHeader.map((header) => (
+            <SortableColumns
+              key={header.id}
+              header={header}
+              onEyeClick={onEyeClick}
+              hiddenHeaders={hiddenHeaders}
+            />
+          ))}
+        </SortableContext>
+        <Portal>
+          <DragOverlay dropAnimation={{ duration: 0 }}>
+            {draggingColumnId ? <Flex /> : null}
+          </DragOverlay>
+        </Portal>
+      </DndContext>
     </Stack>
   )
 }
@@ -147,7 +145,7 @@ const SortableColumns = ({
       opacity={isDragging || isHidden ? 0.5 : 1}
       {...attributes}
     >
-      <HStack>
+      <HStack overflow="hidden">
         <IconButton
           size="sm"
           cursor="grab"