🚸 Fix select and autocomplete max width

Closes #1310

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"

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"

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"

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}

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}