blsmedia/bot
2
0
Fork 0
Code Activity

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

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-03-06 16:56:55 +01:00
parent 26e5d9c282
commit f527df82dd
4 changed files with 38 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/builder/src/components/inputs/VariableSearchInput.tsx
View File

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

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

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

4
apps/builder/src/features/results/components/ResultsTable/Cell.tsx
View File

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

58
apps/builder/src/features/results/components/ResultsTable/ColumnSettings.tsx
View File

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