Fix dropdown width (#11536)

Fix regressions due to dropdown refactoring

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdown.tsx

@@ -1,5 +1,4 @@
 import { DROPDOWN_OFFSET_Y } from '@/dropdown/constants/DropdownOffsetY';
-import { DROPDOWN_WIDTH } from '@/dropdown/constants/DropdownWidth';
 import { useCurrentContentId } from '@/dropdown/hooks/useCurrentContentId';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { ObjectOptionsDropdownContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownContent';
@@ -33,7 +32,6 @@ export const ObjectOptionsDropdown = ({
     <Dropdown
       dropdownId={OBJECT_OPTIONS_DROPDOWN_ID}
       dropdownHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
-      dropdownWidth={DROPDOWN_WIDTH}
       dropdownOffset={{ y: DROPDOWN_OFFSET_Y }}
       clickableComponent={
         <StyledHeaderDropdownButton isUnfolded={isDropdownOpen}>

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx

@@ -12,13 +12,13 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { IconCheck, IconPlus } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+import { MenuItem } from 'twenty-ui/navigation';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { moveArrayItem } from '~/utils/array/moveArrayItem';
 import { toSpliced } from '~/utils/array/toSpliced';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
-import { IconCheck, IconPlus } from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
-import { MenuItem } from 'twenty-ui/navigation';
 
 type MultiItemFieldInputProps<T> = {
   items: T[];
@@ -180,7 +180,7 @@ export const MultiItemFieldInput = <T,>({
   };
 
   return (
-    <DropdownMenu ref={containerRef} width={200}>
+    <DropdownMenu ref={containerRef}>
       {!!items.length && (
         <>
           <DropdownMenuItemsContainer>

packages/twenty-front/src/modules/ui/input/components/Select.tsx

@@ -152,10 +152,7 @@ export const Select = <Value extends SelectValue>({
                 <DropdownMenuSeparator />
               )}
               {!!filteredOptions.length && (
-                <DropdownMenuItemsContainer
-                  hasMaxHeight
-                  width={dropDownMenuWidth}
-                >
+                <DropdownMenuItemsContainer hasMaxHeight width={'auto'}>
                   {filteredOptions.map((option) => (
                     <MenuItemSelect
                       key={`${option.value}-${option.label}`}

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx

@@ -6,7 +6,7 @@ import { isDefined } from 'twenty-shared/utils';
 
 const StyledDropdownMenuItemsExternalContainer = styled.div<{
   hasMaxHeight?: boolean;
-  width: number;
+  width: number | 'auto';
 }>`
   --padding: ${({ theme }) => theme.spacing(1)};
 
@@ -52,7 +52,7 @@ export const DropdownMenuItemsContainer = ({
   hasMaxHeight?: boolean;
   className?: string;
   scrollable?: boolean;
-  width?: number;
+  width?: number | 'auto';
 }) => {
   const id = useId();
 

packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx

@@ -166,7 +166,6 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
           <StyledLabel>Record Type</StyledLabel>
           <Dropdown
             dropdownId="workflow-edit-trigger-record-type"
-            dropdownWidth={300}
             dropdownPlacement="bottom-start"
             clickableComponent={
               <SelectControl