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"