🚸 Fix select and autocomplete max width

Closes #1310
baptisteArno · Mar 15, 2024 · 70cc1f0 · 70cc1f0
1 parent 968abf5
commit 70cc1f0
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git 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
@@ -33,15 +33,13 @@ type Item =
     }
 
 type Props<T extends Item> = {
-  isPopoverMatchingInputWidth?: boolean
   selectedItem?: string
   items: readonly T[] | undefined
   placeholder?: string
   onSelect?: (value: string | undefined, item?: T) => void
 }
 
 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
@@ -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
@@ -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
@@ -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}