🐛 (editor) Fix variable dropdown overflow

Closes #209

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor/TextBubbleEditor.tsx

@@ -3,7 +3,6 @@ import {
   Stack,
   useColorModeValue,
   useEventListener,
-  useOutsideClick,
 } from '@chakra-ui/react'
 import React, { useEffect, useRef, useState } from 'react'
 import {
@@ -22,6 +21,7 @@ import { serializeHtml } from '@udecode/plate-serializer-html'
 import { parseHtmlStringToPlainText } from '../../utils'
 import { VariableSearchInput } from '@/components/VariableSearchInput'
 import { colors } from '@/lib/theme'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 
 type TextBubbleEditorContentProps = {
   id: string

apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/WebhookSettings.tsx

@@ -193,7 +193,7 @@ export const WebhookSettings = ({
                 Query params
                 <AccordionIcon />
               </AccordionButton>
-              <AccordionPanel pb={4} as={Stack} spacing="6">
+              <AccordionPanel py={4} as={Stack} spacing="6">
                 <TableList<KeyValue>
                   initialItems={localWebhook.queryParams}
                   onItemsChange={handleQueryParamsChange}
@@ -208,7 +208,7 @@ export const WebhookSettings = ({
                 Headers
                 <AccordionIcon />
               </AccordionButton>
-              <AccordionPanel pb={4} as={Stack} spacing="6">
+              <AccordionPanel py={4} as={Stack} spacing="6">
                 <TableList<KeyValue>
                   initialItems={localWebhook.headers}
                   onItemsChange={handleHeadersChange}
@@ -223,7 +223,7 @@ export const WebhookSettings = ({
                 Body
                 <AccordionIcon />
               </AccordionButton>
-              <AccordionPanel pb={4} as={Stack} spacing="6">
+              <AccordionPanel py={4} as={Stack} spacing="6">
                 <SwitchWithLabel
                   label="Custom body"
                   initialValue={options.isCustomBody ?? true}
@@ -244,7 +244,7 @@ export const WebhookSettings = ({
                 Variable values for test
                 <AccordionIcon />
               </AccordionButton>
-              <AccordionPanel pb={4} as={Stack} spacing="6">
+              <AccordionPanel py={4} as={Stack} spacing="6">
                 <TableList<VariableForTest>
                   initialItems={
                     options?.variablesForTest ?? { byId: {}, allIds: [] }
@@ -279,7 +279,7 @@ export const WebhookSettings = ({
                 Save in variables
                 <AccordionIcon />
               </AccordionButton>
-              <AccordionPanel pb={4} as={Stack} spacing="6">
+              <AccordionPanel py={4} as={Stack} spacing="6">
                 <TableList<ResponseVariableMapping>
                   initialItems={options.responseVariableMapping}
                   onItemsChange={handleResponseMappingChange}

apps/builder/src/features/graph/components/Nodes/GroupNode/GroupNode.tsx

@@ -120,10 +120,6 @@ const NonMemoizedDraggableGroupNode = ({
   const handleTitleSubmit = (title: string) =>
     title.length > 0 ? updateGroup(groupIndex, { title }) : undefined
 
-  const handleMouseDown = (e: React.MouseEvent) => {
-    e.stopPropagation()
-  }
-
   const handleMouseEnter = () => {
     if (isReadOnly) return
     if (mouseOverGroup?.id !== group.id && !isStartGroup)
@@ -200,7 +196,6 @@ const NonMemoizedDraggableGroupNode = ({
               currentCoordinates?.y ?? 0
             }px)`,
           }}
-          onMouseDown={handleMouseDown}
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}
           cursor={isMouseDown ? 'grabbing' : 'pointer'}

apps/builder/src/features/graph/utils.ts

@@ -342,7 +342,7 @@ export const getEndpointTopOffset = ({
   if (!endpointId) return
   const endpointRef = endpoints[endpointId]?.ref
   if (!endpointRef?.current) return
-  const endpointHeight = 28 * graphScale
+  const endpointHeight = 34 * graphScale
   return (
     (endpointRef.current.getBoundingClientRect().y +
       endpointHeight / 2 -

apps/builder/src/features/publish/components/embeds/modals/WordpressModal.tsx

@@ -13,6 +13,7 @@ import {
   InputRightElement,
   ModalFooter,
   Link,
+  useColorModeValue,
 } from '@chakra-ui/react'
 import { ExternalLinkIcon } from '@/components/icons'
 import { env, getViewerUrl } from 'utils'
@@ -44,7 +45,7 @@ export const WordpressModal = ({
               <Link
                 href="https://wordpress.org/plugins/typebot/"
                 isExternal
-                color="blue.500"
+                color={useColorModeValue('blue.500', 'blue.300')}
               >
                 the official Typebot WordPress plugin
                 <ExternalLinkIcon mx="2px" />

apps/builder/src/features/templates/components/TemplatesModal.tsx

@@ -68,8 +68,8 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
     >
       <ModalOverlay />
       <ModalContent h="85vh">
-        <ModalBody as={HStack} p="0">
-          <Stack w="full" h="full">
+        <ModalBody as={HStack} p="0" spacing="0">
+          <Stack w="full" h="full" spacing="4">
             <Heading pl="10" pt="4" fontSize="2xl">
               {selectedTemplate.emoji}{' '}
               <chakra.span ml="2">{selectedTemplate.name}</chakra.span>
@@ -79,6 +79,7 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
                 apiHost={getViewerUrl({ isBuilder: true })}
                 typebot={parseTypebotToPublicTypebot(typebot)}
                 key={typebot.id}
+                style={{ borderRadius: '0.25rem' }}
               />
             )}
           </Stack>