Harmonize filter and sort dropdown width (#12649)

This PR sets the same width for all dropdowns used in filter and sort
features.

We use GenericDropdownContentWidth. ExtraLarge (320px) as specified on
Figma :
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=44490-81923&t=h6KWtlM5WUm4aujY-11

Fixes https://github.com/twentyhq/core-team-issues/issues/1004

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx

@@ -17,6 +17,7 @@ import { isExpectedSubFieldName } from '@/object-record/object-filter-dropdown/u
 import { isFilterOnActorSourceSubField } from '@/object-record/object-filter-dropdown/utils/isFilterOnActorSourceSubField';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { FieldMetadataType } from 'twenty-shared/types';
 
@@ -53,7 +54,7 @@ export const AdvancedFilterDropdownFilterInput = ({
         <ObjectFilterDropdownDateInput />
       )}
       {filterType === 'RELATION' && (
-        <DropdownContent>
+        <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
           <ObjectFilterDropdownSearchInput />
           <DropdownMenuSeparator />
           <ObjectFilterDropdownRecordSelect recordFilterId={recordFilter.id} />
@@ -66,7 +67,7 @@ export const AdvancedFilterDropdownFilterInput = ({
           <ObjectFilterDropdownTextInput />
         ))}
       {['SELECT', 'MULTI_SELECT'].includes(filterType) && (
-        <DropdownContent>
+        <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
           <ObjectFilterDropdownSearchInput />
           <DropdownMenuSeparator />
           <ObjectFilterDropdownOptionSelect />

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx

@@ -23,6 +23,7 @@ import { isCompositeFieldType } from '@/object-record/object-filter-dropdown/uti
 import { useFilterableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuSectionLabel } from '@/ui/layout/dropdown/components/DropdownMenuSectionLabel';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useLingui } from '@lingui/react/macro';
@@ -140,7 +141,7 @@ export const AdvancedFilterFieldSelectMenu = ({
   const { t } = useLingui();
 
   return (
-    <DropdownContent>
+    <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
       <AdvancedFilterFieldSelectSearchInput />
       <SelectableList
         hotkeyScope={advancedFilterFieldSelectDropdownId}

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx

@@ -18,6 +18,7 @@ import { CompositeFieldSubFieldName } from '@/settings/data-model/types/Composit
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
 import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
@@ -110,7 +111,7 @@ export const AdvancedFilterSubFieldSelectMenu = ({
   ];
 
   return (
-    <DropdownContent>
+    <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
       <DropdownMenuHeader
         StartComponent={
           <DropdownMenuHeaderLeftComponent

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx

@@ -7,6 +7,7 @@ import { SingleRecordPickerHotkeyScope } from '@/object-record/record-picker/sin
 import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { IconCheck } from 'twenty-ui/display';
@@ -52,7 +53,7 @@ export const ObjectFilterDropdownBooleanSelect = () => {
   };
 
   return (
-    <DropdownContent>
+    <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
       <SelectableList
         selectableListInstanceId="boolean-select"
         selectableItemIdArray={options.map((option) => option.toString())}

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownCountrySelect.tsx

@@ -9,6 +9,7 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useLingui } from '@lingui/react/macro';
 import { isNonEmptyString } from '@sniptt/guards';
@@ -96,7 +97,7 @@ export const ObjectFilterDropdownCountrySelect = () => {
   const { t } = useLingui();
 
   return (
-    <DropdownContent>
+    <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
       <DropdownMenuSearchInput
         autoFocus
         type="text"

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownCurrencySelect.tsx

@@ -96,7 +96,7 @@ export const ObjectFilterDropdownCurrencySelect = () => {
     searchText !== '';
 
   return (
-    <DropdownContent widthInPixels={GenericDropdownContentWidth.Large}>
+    <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
       <DropdownMenuSearchInput
         autoFocus
         type="text"

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx

@@ -20,6 +20,7 @@ import { TEXT_FILTER_TYPES } from '@/object-record/object-filter-dropdown/consta
 import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
 import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { isDefined } from 'twenty-shared/utils';
 
@@ -81,7 +82,7 @@ export const ObjectFilterDropdownFilterInput = ({
 
   if (isOnlyOperand) {
     return (
-      <DropdownContent>
+      <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
         <ObjectFilterDropdownFilterInputHeader />
         <ObjectFilterDropdownInnerSelectOperandDropdown />
       </DropdownContent>
@@ -97,7 +98,7 @@ export const ObjectFilterDropdownFilterInput = ({
     );
   } else {
     return (
-      <DropdownContent>
+      <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
         <ObjectFilterDropdownFilterInputHeader />
         <ObjectFilterDropdownInnerSelectOperandDropdown />
         <DropdownMenuSeparator />

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx

@@ -5,6 +5,7 @@ import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object
 import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
@@ -46,7 +47,7 @@ export const ObjectFilterDropdownOperandSelect = () => {
   };
 
   return (
-    <DropdownContent>
+    <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
       <StyledDropdownMenuItemsContainer>
         {operandsForFilterType.map((filterOperand, index) => (
           <MenuItem

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx

@@ -6,6 +6,8 @@ import { getActorSourceMultiSelectOptions } from '@/object-record/object-filter-
 import { SingleRecordPickerHotkeyScope } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerHotkeyScope';
 import { MultipleSelectDropdown } from '@/object-record/select/components/MultipleSelectDropdown';
 import { SelectableItem } from '@/object-record/select/types/SelectableItem';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { isNonEmptyString } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared/utils';
@@ -73,18 +75,20 @@ export const ObjectFilterDropdownSourceSelect = () => {
   };
 
   return (
-    <MultipleSelectDropdown
+    <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
-      selectableListId="object-filter-source-select-id"
+      <MultipleSelectDropdown
-      hotkeyScope={SingleRecordPickerHotkeyScope.SingleRecordPicker}
+        selectableListId="object-filter-source-select-id"
-      itemsToSelect={sourceTypes.filter(
+        hotkeyScope={SingleRecordPickerHotkeyScope.SingleRecordPicker}
-        (item) =>
+        itemsToSelect={sourceTypes.filter(
-          !filteredSelectedItems.some((selected) => selected.id === item.id),
+          (item) =>
-      )}
+            !filteredSelectedItems.some((selected) => selected.id === item.id),
-      filteredSelectedItems={filteredSelectedItems}
+        )}
-      selectedItems={filteredSelectedItems}
+        filteredSelectedItems={filteredSelectedItems}
-      onChange={handleMultipleItemSelectChange}
+        selectedItems={filteredSelectedItems}
-      searchFilter={objectFilterDropdownSearchInput}
+        onChange={handleMultipleItemSelectChange}
-      loadingItems={false}
+        searchFilter={objectFilterDropdownSearchInput}
-    />
+        loadingItems={false}
+      />
+    </DropdownContent>
   );
 };

packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx

@@ -25,6 +25,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSectionLabel } from '@/ui/layout/dropdown/components/DropdownMenuSectionLabel';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
@@ -237,7 +238,7 @@ export const ObjectSortDropdownButton = ({
         </StyledHeaderDropdownButton>
       }
       dropdownComponents={
-        <DropdownContent>
+        <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
           <SelectableList
             selectableListInstanceId={OBJECT_SORT_DROPDOWN_ID}
             hotkeyScope={hotkeyScope.scope}

packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx

@@ -2,7 +2,6 @@ import { Key } from 'ts-key-enum';
 
 import { SelectableItem } from '@/object-record/select/types/SelectableItem';
 import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
-import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
@@ -81,48 +80,46 @@ export const MultipleSelectDropdown = ({
   const selectableItemIds = itemsInDropdown.map((item) => item.id);
 
   return (
-    <DropdownContent>
+    <SelectableList
-      <SelectableList
+      selectableListInstanceId={selectableListId}
-        selectableListInstanceId={selectableListId}
+      selectableItemIdArray={selectableItemIds}
-        selectableItemIdArray={selectableItemIds}
+      hotkeyScope={hotkeyScope}
-        hotkeyScope={hotkeyScope}
+    >
-      >
+      <DropdownMenuItemsContainer hasMaxHeight>
-        <DropdownMenuItemsContainer hasMaxHeight>
+        {itemsInDropdown?.map((item) => {
-          {itemsInDropdown?.map((item) => {
+          return (
-            return (
+            <SelectableListItem
-              <SelectableListItem
+              itemId={item.id}
-                itemId={item.id}
+              onEnter={() => {
-                onEnter={() => {
+                resetSelectedItem();
+                handleItemSelectChange(item, !item.isSelected);
+              }}
+            >
+              <MenuItemMultiSelectAvatar
+                key={item.id}
+                selected={item.isSelected}
+                isKeySelected={item.id === selectedItemId}
+                onSelectChange={(newCheckedValue) => {
                   resetSelectedItem();
-                  handleItemSelectChange(item, !item.isSelected);
+                  handleItemSelectChange(item, newCheckedValue);
                 }}
-              >
+                text={item.name}
-                <MenuItemMultiSelectAvatar
+                avatar={
-                  key={item.id}
+                  <Avatar
-                  selected={item.isSelected}
+                    avatarUrl={item.avatarUrl}
-                  isKeySelected={item.id === selectedItemId}
+                    placeholderColorSeed={item.id}
-                  onSelectChange={(newCheckedValue) => {
+                    placeholder={item.name}
-                    resetSelectedItem();
+                    size="md"
-                    handleItemSelectChange(item, newCheckedValue);
+                    type={item.avatarType}
-                  }}
+                  />
-                  text={item.name}
+                }
-                  avatar={
+              />
-                    <Avatar
+            </SelectableListItem>
-                      avatarUrl={item.avatarUrl}
+          );
-                      placeholderColorSeed={item.id}
+        })}
-                      placeholder={item.name}
+        {showNoResult && <MenuItem text="No results" />}
-                      size="md"
+        {loadingItems && <DropdownMenuSkeletonItem />}
-                      type={item.avatarType}
+      </DropdownMenuItemsContainer>
-                    />
+    </SelectableList>
-                  }
-                />
-              </SelectableListItem>
-            );
-          })}
-          {showNoResult && <MenuItem text="No results" />}
-          {loadingItems && <DropdownMenuSkeletonItem />}
-        </DropdownMenuItemsContainer>
-      </SelectableList>
-    </DropdownContent>
   );
 };

packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx

@@ -17,6 +17,7 @@ import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/
 import { ViewBarFilterDropdownBottomMenu } from '@/views/components/ViewBarFilterDropdownBottomMenu';
 import { ViewBarFilterDropdownFieldSelectMenuItem } from '@/views/components/ViewBarFilterDropdownFieldSelectMenuItem';
 
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 import { VIEW_BAR_FILTER_BOTTOM_MENU_ITEM_IDS } from '@/views/constants/ViewBarFilterBottomMenuItemIds';
 import { useLingui } from '@lingui/react/macro';
 
@@ -81,7 +82,7 @@ export const ViewBarFilterDropdownFieldSelectMenu = () => {
   const { t } = useLingui();
 
   return (
-    <DropdownContent>
+    <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
       <StyledInput
         value={objectFilterDropdownSearchInput}
         autoFocus

packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownVectorSearchInput.tsx

@@ -34,7 +34,7 @@ export const ViewBarFilterDropdownVectorSearchInput = ({
   };
 
   return (
-    <DropdownContent widthInPixels={GenericDropdownContentWidth.Medium}>
+    <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
       <DropdownMenuSearchInput
         autoFocus
         type="text"