Fix broken dropdown auto resize behavior (#11423)

This PR was originally about fixing advanced filter dropdown auto resize
to avoid breaking the app main container, but the regression is not
limited to advanced filter dropdown, so this PR fixes the regression for
every dropdown in the app.

This PR adds a max dropdown max width to allow resizing dropdowns
horizontally also, which can happen easily for the advanced filter
dropdown.

In this PR we also start removing `fieldMetadataItemUsedInDropdown` in
component `AdvancedFilterDropdownTextInput` because it has no impact
outside of this component which is used only once.

The autoresize behavior determines the right padding-bottom between
mobile and PC.

Mobile : 

<img width="604" alt="Capture d’écran 2025-04-07 à 16 03 12"
src="https://github.com/user-attachments/assets/fbdd8020-1bfc-4e01-8a05-3a9f114cdd40"
/>

PC :

<img width="757" alt="Capture d’écran 2025-04-07 à 16 03 30"
src="https://github.com/user-attachments/assets/f80a5967-8f60-40bb-ae3c-fa9eb4c65707"
/>

Fixes https://github.com/twentyhq/core-team-issues/issues/725
Fixes https://github.com/twentyhq/twenty/issues/11409

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -1,9 +1,12 @@
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useId } from 'react';
+import { isDefined } from 'twenty-shared/utils';
 
 const StyledDropdownMenuItemsExternalContainer = styled.div<{
   hasMaxHeight?: boolean;
+  width: number;
 }>`
   --padding: ${({ theme }) => theme.spacing(1)};
 
@@ -15,7 +18,11 @@ const StyledDropdownMenuItemsExternalContainer = styled.div<{
 
   padding: var(--padding);
 
-  width: calc(100% - 2 * var(--padding));
+  ${({ width }) =>
+    isDefined(width) &&
+    css`
+      width: ${width}px;
+    `}
 `;
 
 const StyledDropdownMenuItemsInternalContainer = styled.div`
@@ -38,12 +45,14 @@ export const DropdownMenuItemsContainer = ({
   children,
   hasMaxHeight,
   className,
+  width = 200,
   scrollable = true,
 }: {
   children: React.ReactNode;
   hasMaxHeight?: boolean;
   className?: string;
   scrollable?: boolean;
+  width?: number;
 }) => {
   const id = useId();
 
@@ -52,6 +61,7 @@ export const DropdownMenuItemsContainer = ({
       hasMaxHeight={hasMaxHeight}
       className={className}
       role="listbox"
+      width={width}
     >
       {hasMaxHeight ? (
         <StyledScrollWrapper
@@ -73,6 +83,7 @@ export const DropdownMenuItemsContainer = ({
         hasMaxHeight={hasMaxHeight}
         className={className}
         role="listbox"
+        width={width}
       >
         <StyledDropdownMenuItemsInternalContainer>
           {children}