🐛 Fix forge autocomplete input popover rendering behind dialog

apps/builder/src/components/combobox.tsx

@@ -20,7 +20,11 @@ const Root = forwardRef<HTMLDivElement, ArkCombobox.RootProps<CollectionItem>>(
           gutter: 4,
           placement: "bottom-start",
         }}
-        className={cn(props.className, colorMode === "dark" && "dark")}
+        className={cn(
+          "items-start",
+          props.className,
+          colorMode === "dark" && "dark",
+        )}
       />
     );
   },
@@ -34,8 +38,14 @@ const Label = forwardRef<HTMLLabelElement, ArkCombobox.LabelProps>(
 Label.displayName = ArkCombobox.Label.displayName;
 
 const Control = forwardRef<HTMLDivElement, ArkCombobox.ControlProps>(
-  (props, ref) => {
-    return <ArkCombobox.Control ref={ref} {...props} />;
+  ({ className, ...props }, ref) => {
+    return (
+      <ArkCombobox.Control
+        ref={ref}
+        className={cn("flex-1", className)}
+        {...props}
+      />
+    );
   },
 );
 Control.displayName = ArkCombobox.Control.displayName;

apps/builder/src/features/forge/components/ForgeAutocompleteInput.tsx

@@ -1,6 +1,7 @@
 import { MoreInfoTooltip } from "@/components/MoreInfoTooltip";
 import { Combobox } from "@/components/combobox";
 import { Field } from "@/components/field";
+import { useParentModal } from "@/features/graph/providers/ParentModalProvider";
 import { VariablesButton } from "@/features/variables/components/VariablesButton";
 import { useDebounce } from "@/hooks/useDebounce";
 import { useInjectableInputValue } from "@/hooks/useInjectableInputValue";
@@ -66,6 +67,7 @@ export const AutocompleteInput = ({
   items: Item[] | undefined;
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
+  const { ref: parentModalRef } = useParentModal();
   const {
     value: inputValue,
     setValue: setInputValue,
@@ -124,7 +126,7 @@ export const AutocompleteInput = ({
             )}
           </Combobox.Label>
         )}
-        <div className="flex items-center">
+        <div className="flex items-center w-full">
           <Combobox.Control>
             <Combobox.Input />
           </Combobox.Control>
@@ -138,7 +140,7 @@ export const AutocompleteInput = ({
           )}
         </div>
 
-        <Portal>
+        <Portal container={parentModalRef}>
           <Combobox.Positioner>
             {filteredCollection.size > 0 &&
               (filteredCollection.size > 1 ||

apps/builder/src/features/graph/components/ZoomButtons.tsx

@@ -16,7 +16,6 @@ export const ZoomButtons = ({
     right="40px"
     bgColor={useColorModeValue("white", "gray.950")}
     rounded="md"
-    zIndex={1}
     spacing="0"
     shadow="md"
   >

apps/builder/src/features/graph/components/nodes/block/SettingsModal.tsx

@@ -1,40 +1,30 @@
 import { useParentModal } from "@/features/graph/providers/ParentModalProvider";
-import {
-  Modal,
-  ModalBody,
-  type ModalBodyProps,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-} from "@chakra-ui/react";
+import { Portal } from "@ark-ui/react";
+import { Dialog } from "@ark-ui/react/dialog";
+import { dialogClassNames } from "@typebot.io/ui/components/Dialog";
 import type React from "react";
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
+  children: React.ReactNode;
 };
 
-export const SettingsModal = ({
-  isOpen,
-  onClose,
-  ...props
-}: Props & ModalBodyProps) => {
+export const SettingsModal = ({ isOpen, onClose, children }: Props) => {
   const { ref } = useParentModal();
-  const handleMouseDown = (e: React.MouseEvent) => {
-    e.stopPropagation();
-  };
   return (
-    <Modal isOpen={isOpen} onClose={onClose} size="3xl">
-      <ModalOverlay />
-      <ModalContent onMouseDown={handleMouseDown} ref={ref}>
-        <ModalHeader mb="2">
-          <ModalCloseButton />
-        </ModalHeader>
-        <ModalBody {...props}>{props.children}</ModalBody>
-        <ModalFooter />
-      </ModalContent>
-    </Modal>
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={(e) => (e.open ? undefined : onClose())}
+    >
+      <Portal>
+        <Dialog.Backdrop className={dialogClassNames.backdrop} />
+        <Dialog.Positioner className={dialogClassNames.positioner}>
+          <Dialog.Content className={dialogClassNames.content} ref={ref}>
+            {children}
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
   );
 };

apps/landing-page/app/features/pricing/TiersDialog.tsx

@@ -11,6 +11,7 @@ import {
 import { Dialog, Portal } from "@ark-ui/react";
 import { proChatTiers } from "@typebot.io/billing/constants";
 import { formatPrice } from "@typebot.io/billing/helpers/formatPrice";
+import { dialogClassNames } from "@typebot.io/ui/components/Dialog";
 import { CloseIcon } from "@typebot.io/ui/icons/CloseIcon";
 
 export const TiersDialog = ({
@@ -22,10 +23,12 @@ export const TiersDialog = ({
 }) => (
   <Dialog.Root open={open} onOpenChange={(e) => (!e.open ? onClose() : null)}>
     <Portal>
-      <Dialog.Backdrop className="fixed inset-0 w-full bg-gray-12/50 data-[state=open]:animate-in data-[state=open]:fade-in data-[state=closed]:animate-out data-[state=closed]:fade-out overflow-auto" />
-      <Dialog.Positioner className="flex justify-center fixed inset-0 w-full py-12">
-        <Dialog.Content className="relative bg-gray-1 p-6 rounded-xl w-full max-w-xl overflow-auto data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom-5 data-[state=open]:fade-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom-5 data-[state=closed]:fade-out">
-          <Dialog.Title className="text-2xl">Chats pricing table</Dialog.Title>
+      <Dialog.Backdrop className={dialogClassNames.backdrop} />
+      <Dialog.Positioner className={dialogClassNames.positioner}>
+        <Dialog.Content className={dialogClassNames.content}>
+          <Dialog.Title className={dialogClassNames.title}>
+            Chats pricing table
+          </Dialog.Title>
           <Dialog.CloseTrigger asChild>
             <IconButton
               aria-label="Close"

packages/ui/src/components/Dialog.tsx

@@ -0,0 +1,8 @@
+export const dialogClassNames = {
+  backdrop:
+    "fixed inset-0 w-full bg-gray-12/50 data-[state=open]:animate-in data-[state=open]:fade-in data-[state=closed]:animate-out data-[state=closed]:fade-out overflow-auto",
+  positioner: "flex justify-center fixed top-0 w-full py-12 max-h-full",
+  content:
+    "relative bg-gray-1 p-6 rounded-xl w-full max-w-xl overflow-auto data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom-5 data-[state=open]:fade-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom-5 data-[state=closed]:fade-out",
+  title: "text-2xl",
+};