Fix country selector text overflow issue (#8125)

Closes #7906 

Modified the two children(`TextInputV2` and `CountrySelect`) in the
`StyledHalfRowContainer` component to always be equal in size and divide
the available space equally.
The `StyledIconChevronDown` component has a `flex-shrink: 0` to prevent
it from completely disappearing. The same applies for the
`selectedOption.Icon`.
A `p` tag had to be added to the label to correctly handle the text
overflow.

---------

Co-authored-by: Devessier <baptiste@devessier.fr>

packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx

@@ -19,13 +19,13 @@ const StyledAddressContainer = styled.div`
 
   padding: 4px 8px;
 
-  width: 100%;
+  width: 344px;
-  min-width: 260px;
   > div {
     margin-bottom: 6px;
   }
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: auto;
     min-width: 100px;
     max-width: 200px;
     overflow: hidden;
@@ -36,7 +36,8 @@ const StyledAddressContainer = styled.div`
 `;
 
 const StyledHalfRowContainer = styled.div`
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {

packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx

@@ -1,28 +1,31 @@
 import { SelectOption } from '@/ui/input/components/Select';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconChevronDown } from 'twenty-ui';
+import {
+  IconChevronDown,
+  isDefined,
+  OverflowingTextWithTooltip,
+} from 'twenty-ui';
 
-const StyledControlContainer = styled.div<{ disabled?: boolean }>`
+const StyledControlContainer = styled.div<{
+  disabled?: boolean;
+  hasIcon: boolean;
+}>`
+  display: grid;
+  grid-template-columns: ${({ hasIcon }) =>
+    hasIcon ? 'auto 1fr auto' : '1fr auto'};
   align-items: center;
+  gap: ${({ theme }) => theme.spacing(1)};
+  box-sizing: border-box;
+  height: ${({ theme }) => theme.spacing(8)};
+  max-width: 100%;
+  padding: 0 ${({ theme }) => theme.spacing(2)};
   background-color: ${({ theme }) => theme.background.transparent.lighter};
   border: 1px solid ${({ theme }) => theme.border.color.medium};
-  box-sizing: border-box;
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ disabled, theme }) =>
     disabled ? theme.font.color.tertiary : theme.font.color.primary};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-  height: ${({ theme }) => theme.spacing(8)};
-  justify-content: space-between;
-  padding: 0 ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledControlLabel = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledIconChevronDown = styled(IconChevronDown)<{
@@ -44,19 +47,18 @@ export const SelectControl = ({
   const theme = useTheme();
 
   return (
-    <StyledControlContainer disabled={isDisabled}>
+    <StyledControlContainer
-      <StyledControlLabel>
+      disabled={isDisabled}
-        {!!selectedOption?.Icon && (
+      hasIcon={isDefined(selectedOption.Icon)}
-          <selectedOption.Icon
+    >
-            color={
+      {isDefined(selectedOption.Icon) ? (
-              isDisabled ? theme.font.color.light : theme.font.color.primary
+        <selectedOption.Icon
-            }
+          color={isDisabled ? theme.font.color.light : theme.font.color.primary}
-            size={theme.icon.size.md}
+          size={theme.icon.size.md}
-            stroke={theme.icon.stroke.sm}
+          stroke={theme.icon.stroke.sm}
-          />
+        />
-        )}
+      ) : null}
-        {selectedOption?.label}
+      <OverflowingTextWithTooltip text={selectedOption.label} />
-      </StyledControlLabel>
       <StyledIconChevronDown disabled={isDisabled} size={theme.icon.size.md} />
     </StyledControlContainer>
   );