fix: 🐛 Minor changes and improved accessibility

apps/builder/components/shared/Graph/Edges/Edge.tsx

@@ -27,6 +27,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
     blocksCoordinates,
     graphPosition,
     isReadOnly,
+    setPreviewingEdge,
   } = useGraph()
   const [isMouseOver, setIsMouseOver] = useState(false)
   const { isOpen, onOpen, onClose } = useDisclosure()
@@ -92,8 +93,13 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
 
   const handleMouseLeave = () => setIsMouseOver(false)
 
-  const handleEdgeClick = (e: React.MouseEvent) => {
+  const handleEdgeClick = () => {
+    setPreviewingEdge(edge)
+  }
+
+  const handleContextMenuTrigger = (e: React.MouseEvent) => {
     if (isReadOnly) return
+    e.preventDefault()
     setEdgeMenuPosition({ x: e.clientX, y: e.clientY })
     onOpen()
   }
@@ -113,6 +119,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         onClick={handleEdgeClick}
+        onContextMenu={handleContextMenuTrigger}
       />
       <path
         data-testid="edge"

apps/builder/components/shared/Graph/Graph.tsx

@@ -36,6 +36,7 @@ export const Graph = ({
     setGraphPosition: setGlobalGraphPosition,
     setOpenedStepId,
     updateBlockCoordinates,
+    setPreviewingEdge,
   } = useGraph()
   const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)
   const [debouncedGraphPosition] = useDebounce(graphPosition, 200)
@@ -98,7 +99,10 @@ export const Graph = ({
     if (isRightClick) e.stopPropagation()
   }
 
-  const handleClick = () => setOpenedStepId(undefined)
+  const handleClick = () => {
+    setOpenedStepId(undefined)
+    setPreviewingEdge(undefined)
+  }
 
   useEventListener('wheel', handleMouseWheel, graphContainerRef.current)
   useEventListener('mousedown', handleCaptureMouseDown, undefined, {

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/contents/ButtonNodeContent.tsx

@@ -56,7 +56,7 @@ export const ButtonNodeContent = ({
   }
 
   return (
-    <Flex px={4} py={2} justify="center" w="full">
+    <Flex px={4} py={2} justify="center" w="90%">
       <Editable
         ref={editableRef}
         flex="1"

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/TextBubbleContent.tsx

@@ -13,6 +13,7 @@ export const TextBubbleContent = ({ step }: Props) => {
   if (!typebot) return <></>
   return (
     <Flex
+      isTruncated
       flexDir={'column'}
       opacity={step.content.html === '' ? '0.5' : '1'}
       className="slate-html-container"

apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx

@@ -54,7 +54,7 @@ export const TypebotHeader = () => {
       bgColor="white"
       flexShrink={0}
     >
-      <HStack>
+      <HStack display={['none', 'flex']}>
         <Button
           as={NextChakraLink}
           href={`/typebots/${typebot?.id}/edit`}
@@ -126,6 +126,7 @@ export const TypebotHeader = () => {
           )}
           <Tooltip label="Undo">
             <IconButton
+              display={['none', 'flex']}
               icon={<UndoIcon />}
               size="sm"
               aria-label="Undo"
@@ -136,6 +137,7 @@ export const TypebotHeader = () => {
 
           <Tooltip label="Redo">
             <IconButton
+              display={['none', 'flex']}
               icon={<RedoIcon />}
               size="sm"
               aria-label="Redo"
@@ -154,7 +156,7 @@ export const TypebotHeader = () => {
         )}
       </HStack>
 
-      <HStack right="40px" pos="absolute">
+      <HStack right="40px" pos="absolute" display={['none', 'flex']}>
         <CollaborationMenuButton />
         {router.pathname.includes('/edit') && isNotDefined(rightPanel) && (
           <Button onClick={handlePreviewClick}>Preview</Button>