fixed overflowing text for select on card #3494 (#3504)

* fixed  overflowing text for select on card #3494

* maxWidth of useRelationFeild hook

* Fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/display/chip/components/Chip.tsx

@@ -25,7 +25,7 @@ type ChipProps = {
   disabled?: boolean;
   clickable?: boolean;
   label: string;
-  maxWidth?: string;
+  maxWidth?: number;
   variant?: ChipVariant;
   accent?: ChipAccent;
   leftComponent?: ReactNode;
@@ -70,11 +70,18 @@ const StyledContainer = styled.div<Partial<ChipProps>>`
   gap: ${({ theme }) => theme.spacing(1)};
 
   height: ${({ size }) => (size === ChipSize.Large ? '16px' : '12px')};
-  max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : '200px')};
+  --chip-horizontal-padding: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded ? theme.spacing(2) : theme.spacing(1)};
+  max-width: ${({ maxWidth }) =>
+    maxWidth
+      ? `calc( ${maxWidth}px - 2*var(--chip-horizontal-padding))`
+      : '200px'};
+
+  --chip-vertical-padding: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded ? '3px' : theme.spacing(1)};
 
   overflow: hidden;
-  padding: ${({ theme, variant }) =>
-    variant === ChipVariant.Rounded ? '3px 8px' : theme.spacing(1)};
+  padding: var(--chip-vertical-padding) var(--chip-horizontal-padding);
   user-select: none;
 
   :hover {

packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx

@@ -18,6 +18,7 @@ export type EntityChipProps = {
   variant?: EntityChipVariant;
   LeftIcon?: IconComponent;
   className?: string;
+  maxWidth?: number;
 };
 
 export enum EntityChipVariant {
@@ -34,6 +35,7 @@ export const EntityChip = ({
   variant = EntityChipVariant.Regular,
   LeftIcon,
   className,
+  maxWidth,
 }: EntityChipProps) => {
   const navigate = useNavigate();
 
@@ -74,6 +76,7 @@ export const EntityChip = ({
         clickable={!!linkToEntity}
         onClick={handleLinkClick}
         className={className}
+        maxWidth={maxWidth}
       />
     )
   );

packages/twenty-front/src/modules/ui/display/chip/components/__stories__/Chip.stories.tsx

@@ -22,7 +22,7 @@ export const Default: Story = {
     accent: ChipAccent.TextPrimary,
     disabled: false,
     clickable: true,
-    maxWidth: '200px',
+    maxWidth: 200,
   },
   decorators: [ComponentDecorator],
 };