From ca54bc181313977d865c57650ebdce1d938d8297 Mon Sep 17 00:00:00 2001
From: Balaji Krishnamurthy <107975017+BKM14@users.noreply.github.com>
Date: Mon, 28 Oct 2024 20:50:29 +0530
Subject: [PATCH] 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>
---
 .../field/input/components/AddressInput.tsx   |  7 ++-
 .../ui/input/components/SelectControl.tsx     | 56 ++++++++++---------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
index e54de48bb2..c1dc5704d8 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
@@ -19,13 +19,13 @@ const StyledAddressContainer = styled.div`
 
   padding: 4px 8px;
 
-  width: 100%;
-  min-width: 260px;
+  width: 344px;
   > 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) {
diff --git a/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx b/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx
index 6907aea399..5c2b0bc4fd 100644
--- a/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx
+++ b/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}>
-      <StyledControlLabel>
-        {!!selectedOption?.Icon && (
-          <selectedOption.Icon
-            color={
-              isDisabled ? theme.font.color.light : theme.font.color.primary
-            }
-            size={theme.icon.size.md}
-            stroke={theme.icon.stroke.sm}
-          />
-        )}
-        {selectedOption?.label}
-      </StyledControlLabel>
+    <StyledControlContainer
+      disabled={isDisabled}
+      hasIcon={isDefined(selectedOption.Icon)}
+    >
+      {isDefined(selectedOption.Icon) ? (
+        <selectedOption.Icon
+          color={isDisabled ? theme.font.color.light : theme.font.color.primary}
+          size={theme.icon.size.md}
+          stroke={theme.icon.stroke.sm}
+        />
+      ) : null}
+      <OverflowingTextWithTooltip text={selectedOption.label} />
       <StyledIconChevronDown disabled={isDisabled} size={theme.icon.size.md} />
     </StyledControlContainer>
   );