Fix: Inline Phone Field Menu (#4383)

* #4343 fix: phone menu display on page

* Add the possibility to send width as %

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx

@@ -120,6 +120,7 @@ export const CountryPickerDropdownButton = ({
 
   return (
     <Dropdown
+      dropdownMenuWidth={'100%'}
       dropdownId="country-picker-dropdown-id"
       dropdownHotkeyScope={{ scope: CountryPickerHotkeyScope.CountryPicker }}
       clickableComponent={

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

@@ -33,7 +33,7 @@ type DropdownProps = {
   dropdownHotkeyScope: HotkeyScope;
   dropdownId: string;
   dropdownPlacement?: Placement;
-  dropdownMenuWidth?: `${string}px` | 'auto' | number;
+  dropdownMenuWidth?: `${string}px` | `${number}%` | 'auto' | number;
   dropdownOffset?: { x?: number; y?: number };
   onClickOutside?: () => void;
   onClose?: () => void;

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

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 const StyledDropdownMenu = styled.div<{
   disableBlur?: boolean;
-  width?: `${string}px` | 'auto' | number;
+  width?: `${string}px` | `${number}%` | 'auto' | number;
 }>`
   backdrop-filter: ${({ disableBlur }) => (disableBlur ? 'none' : 'blur(8px)')};
   background: ${({ theme }) => theme.background.transparent.secondary};