From 7231ea1e726a06fd0af93b0fa58cb9755b2f8fc7 Mon Sep 17 00:00:00 2001
From: Jeet Desai <52026385+jeet1desai@users.noreply.github.com>
Date: Mon, 11 Mar 2024 21:08:37 +0530
Subject: [PATCH] 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>
---
 .../internal/phone/components/CountryPickerDropdownButton.tsx   | 1 +
 .../src/modules/ui/layout/dropdown/components/Dropdown.tsx      | 2 +-
 .../src/modules/ui/layout/dropdown/components/DropdownMenu.tsx  | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx
index 089f77693..a6bba60c6 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx
+++ b/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={
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
index 57c00af8d..6d303a54c 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+++ b/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;
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx
index cee912701..8dc52fabe 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx
+++ b/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};