From 9d992143ff5e5fce9d1fb7176614a1eba96ffd62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Mon, 15 Apr 2024 15:31:22 +0200
Subject: [PATCH] Improve phone input display (#4968)

Small UI improvements to border / display on phone input field
---
 .../phone/components/PhoneCountryPickerDropdownButton.tsx  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
index 4cfdfb9b75..df439a4862 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
@@ -22,7 +22,8 @@ type StyledDropdownButtonProps = {
 export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
   align-items: center;
   background: ${({ theme }) => theme.background.primary};
-  border-radius: ${({ theme }) => theme.border.radius.xs};
+  border-radius: ${({ theme }) => theme.border.radius.xs} 0 0
+    ${({ theme }) => theme.border.radius.xs};
   color: ${({ color }) => color ?? 'none'};
   cursor: pointer;
   display: flex;
@@ -35,6 +36,8 @@ export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProp
   padding-right: ${({ theme }) => theme.spacing(2)};
   user-select: none;
 
+  border-right: 1px solid ${({ theme }) => theme.border.color.light};
+
   &:hover {
     filter: brightness(0.95);
   }
@@ -50,7 +53,7 @@ const StyledIconContainer = styled.div`
   svg {
     align-items: center;
     display: flex;
-    height: 16px;
+    height: 12px;
     justify-content: center;
   }
 `;