🐛 Fix variable dropdown size in text bubble editor when z…

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

@@ -1,4 +1,12 @@
-import { Flex, Stack, useColorModeValue } from '@chakra-ui/react'
+import {
+  Flex,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  Portal,
+  Stack,
+  useColorModeValue,
+} from '@chakra-ui/react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Plate, PlateProvider, usePlateEditorRef } from '@udecode/plate-core'
 import { editorStyle, platePlugins } from '@/lib/plate'
@@ -22,7 +30,6 @@ const TextBubbleEditorContent = ({
   textEditorValue,
   onClose,
 }: TextBubbleEditorContentProps) => {
-  const variableInputBg = useColorModeValue('white', 'gray.900')
   const editor = usePlateEditorRef()
   const varDropdownRef = useRef<HTMLDivElement | null>(null)
   const rememberedSelection = useRef<BaseSelection | null>(null)
@@ -129,24 +136,21 @@ const TextBubbleEditorContent = ({
           },
         }}
       />
-      {isVariableDropdownOpen && (
+      <Popover isOpen={isVariableDropdownOpen} isLazy>
-        <Flex
+        <PopoverAnchor>
-          pos="absolute"
+          <Flex pos="absolute" ref={varDropdownRef} />
-          ref={varDropdownRef}
+        </PopoverAnchor>
-          shadow="lg"
+        <Portal>
-          rounded="md"
+          <PopoverContent>
-          bg={variableInputBg}
+            <VariableSearchInput
-          w="250px"
+              initialVariableId={undefined}
-          zIndex={10}
+              onSelectVariable={handleVariableSelected}
-        >
+              placeholder="Search for a variable"
-          <VariableSearchInput
+              autoFocus
-            initialVariableId={undefined}
+            />
-            onSelectVariable={handleVariableSelected}
+          </PopoverContent>
-            placeholder="Search for a variable"
+        </Portal>
-            autoFocus
+      </Popover>
-          />
-        </Flex>
-      )}
     </Stack>
   )
 }