From 70cc1f0ce3dd361550d37083509e1b8b0a4642b0 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Fri, 15 Mar 2024 11:57:12 +0100
Subject: [PATCH] :children_crossing: Fix select and autocomplete max width

Closes #1310
---
 apps/builder/src/components/inputs/AutocompleteInput.tsx      | 3 ++-
 apps/builder/src/components/inputs/Select.tsx                 | 4 +---
 apps/builder/src/components/inputs/VariableSearchInput.tsx    | 3 ++-
 .../customDomains/components/CustomDomainsDropdown.tsx        | 2 +-
 .../src/features/workspace/components/AddMemberForm.tsx       | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/builder/src/components/inputs/AutocompleteInput.tsx b/apps/builder/src/components/inputs/AutocompleteInput.tsx
index 02958731c9..7af38e9175 100644
--- a/apps/builder/src/components/inputs/AutocompleteInput.tsx
+++ b/apps/builder/src/components/inputs/AutocompleteInput.tsx
@@ -160,9 +160,9 @@ export const AutocompleteInput = ({
         <Popover
           isOpen={isOpen}
           initialFocusRef={inputRef}
-          matchWidth
           offset={[0, 1]}
           isLazy
+          placement="bottom-start"
         >
           <PopoverAnchor>
             <Input
@@ -181,6 +181,7 @@ export const AutocompleteInput = ({
             <Portal containerRef={parentModalRef}>
               <PopoverContent
                 maxH="35vh"
+                maxW="35vw"
                 overflowY="auto"
                 role="menu"
                 w="inherit"
diff --git a/apps/builder/src/components/inputs/Select.tsx b/apps/builder/src/components/inputs/Select.tsx
index 92b6825fde..d8b81c0fa9 100644
--- a/apps/builder/src/components/inputs/Select.tsx
+++ b/apps/builder/src/components/inputs/Select.tsx
@@ -33,7 +33,6 @@ type Item =
     }
 
 type Props<T extends Item> = {
-  isPopoverMatchingInputWidth?: boolean
   selectedItem?: string
   items: readonly T[] | undefined
   placeholder?: string
@@ -41,7 +40,6 @@ type Props<T extends Item> = {
 }
 
 export const Select = <T extends Item>({
-  isPopoverMatchingInputWidth = true,
   selectedItem,
   placeholder,
   items,
@@ -150,7 +148,6 @@ export const Select = <T extends Item>({
       <Popover
         isOpen={isOpen}
         initialFocusRef={inputRef}
-        matchWidth={isPopoverMatchingInputWidth}
         placement="bottom-start"
         offset={[0, 1]}
         isLazy
@@ -215,6 +212,7 @@ export const Select = <T extends Item>({
         <Portal containerRef={parentModalRef}>
           <PopoverContent
             maxH="35vh"
+            maxW="35vw"
             overflowY="auto"
             role="menu"
             w="inherit"
diff --git a/apps/builder/src/components/inputs/VariableSearchInput.tsx b/apps/builder/src/components/inputs/VariableSearchInput.tsx
index f4e9bbcdec..9d665e0b70 100644
--- a/apps/builder/src/components/inputs/VariableSearchInput.tsx
+++ b/apps/builder/src/components/inputs/VariableSearchInput.tsx
@@ -215,7 +215,7 @@ export const VariableSearchInput = ({
           initialFocusRef={inputRef}
           isLazy
           offset={[0, 2]}
-          placement="auto-start"
+          placement="bottom-start"
         >
           <PopoverAnchor>
             <Input
@@ -233,6 +233,7 @@ export const VariableSearchInput = ({
           <Portal containerRef={parentModalRef}>
             <PopoverContent
               maxH="35vh"
+              maxW="35vw"
               overflowY="auto"
               role="menu"
               w="inherit"
diff --git a/apps/builder/src/features/customDomains/components/CustomDomainsDropdown.tsx b/apps/builder/src/features/customDomains/components/CustomDomainsDropdown.tsx
index e048e25058..be5e833cf0 100644
--- a/apps/builder/src/features/customDomains/components/CustomDomainsDropdown.tsx
+++ b/apps/builder/src/features/customDomains/components/CustomDomainsDropdown.tsx
@@ -81,7 +81,7 @@ export const CustomDomainsDropdown = ({
   }
 
   return (
-    <Menu isLazy placement="bottom-start" matchWidth>
+    <Menu isLazy placement="bottom-start">
       {workspace?.id && (
         <CreateCustomDomainModal
           workspaceId={workspace.id}
diff --git a/apps/builder/src/features/workspace/components/AddMemberForm.tsx b/apps/builder/src/features/workspace/components/AddMemberForm.tsx
index d9905d3cf7..15ace4575f 100644
--- a/apps/builder/src/features/workspace/components/AddMemberForm.tsx
+++ b/apps/builder/src/features/workspace/components/AddMemberForm.tsx
@@ -89,7 +89,7 @@ const WorkspaceRoleMenuButton = ({
   onChange: (role: WorkspaceRole) => void
 }) => {
   return (
-    <Menu placement="bottom-end" isLazy matchWidth>
+    <Menu placement="bottom" isLazy matchWidth>
       <MenuButton
         flexShrink={0}
         as={Button}