From 89f6f322436c95951739d0e0a03c220aada4822e Mon Sep 17 00:00:00 2001
From: Guillim <guillim@users.noreply.github.com>
Date: Wed, 11 Dec 2024 11:37:08 +0100
Subject: [PATCH] Title overflow (#9009)

fix #8803
---
 .../record-board-card/components/RecordBoardCard.tsx     | 1 +
 .../record-index/components/RecordIndexRecordChip.tsx    | 3 +++
 .../twenty-ui/src/display/chip/components/AvatarChip.tsx | 9 ++++++---
 packages/twenty-ui/src/display/chip/components/Chip.tsx  | 5 +++--
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
index a456c89a3d..67968652f8 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
@@ -307,6 +307,7 @@ export const RecordBoardCard = ({
                 objectNameSingular={objectMetadataItem.nameSingular}
                 record={record as ObjectRecord}
                 variant={AvatarChipVariant.Transparent}
+                maxWidth={150}
               />
             )}
 
diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx
index 51121c41c7..b02591e8c8 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx
@@ -10,6 +10,7 @@ export type RecordIdentifierChipProps = {
   record: ObjectRecord;
   variant?: AvatarChipVariant;
   size?: ChipSize;
+  maxWidth?: number;
 };
 
 export const RecordIdentifierChip = ({
@@ -17,6 +18,7 @@ export const RecordIdentifierChip = ({
   record,
   variant,
   size,
+  maxWidth,
 }: RecordIdentifierChipProps) => {
   const { indexIdentifierUrl } = useContext(RecordIndexRootPropsContext);
   const { recordChipData } = useRecordChipData({
@@ -37,6 +39,7 @@ export const RecordIdentifierChip = ({
       LeftIcon={LeftIcon}
       LeftIconColor={LeftIconColor}
       size={size}
+      maxWidth={maxWidth}
     />
   );
 };
diff --git a/packages/twenty-ui/src/display/chip/components/AvatarChip.tsx b/packages/twenty-ui/src/display/chip/components/AvatarChip.tsx
index 32aec0420e..4cd7736a45 100644
--- a/packages/twenty-ui/src/display/chip/components/AvatarChip.tsx
+++ b/packages/twenty-ui/src/display/chip/components/AvatarChip.tsx
@@ -24,6 +24,7 @@ export type AvatarChipProps = {
   placeholderColorSeed?: string;
   onClick?: (event: MouseEvent) => void;
   to?: string;
+  maxWidth?: number;
 };
 
 export enum AvatarChipVariant {
@@ -60,6 +61,7 @@ export const AvatarChip = ({
   onClick,
   to,
   size = ChipSize.Small,
+  maxWidth,
 }: AvatarChipProps) => {
   const { theme } = useContext(ThemeContext);
 
@@ -106,14 +108,15 @@ export const AvatarChip = ({
       clickable={isDefined(onClick) || isDefined(to)}
       onClick={to ? undefined : onClick}
       className={className}
+      maxWidth={maxWidth}
     />
   );
 
-  return to ? (
+  if (!isDefined(to)) return chip;
+
+  return (
     <StyledLink to={to} onClick={onClick}>
       {chip}
     </StyledLink>
-  ) : (
-    chip
   );
 };
diff --git a/packages/twenty-ui/src/display/chip/components/Chip.tsx b/packages/twenty-ui/src/display/chip/components/Chip.tsx
index 42afc99b51..eda194d5e5 100644
--- a/packages/twenty-ui/src/display/chip/components/Chip.tsx
+++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx
@@ -64,7 +64,7 @@ const StyledContainer = withTheme(styled.div<
           : 'inherit'};
 
   display: inline-flex;
-  justify-content: center;
+  justify-content: flex-start;
   gap: ${({ theme }) => theme.spacing(1)};
   height: ${({ theme, size }) =>
     size === ChipSize.Large ? theme.spacing(4) : theme.spacing(3)};
@@ -72,7 +72,6 @@ const StyledContainer = withTheme(styled.div<
     maxWidth
       ? `calc(${maxWidth}px - 2 * var(--chip-horizontal-padding))`
       : '200px'};
-
   overflow: hidden;
   padding: var(--chip-vertical-padding) var(--chip-horizontal-padding);
   user-select: none;
@@ -129,6 +128,7 @@ export const Chip = ({
   accent = ChipAccent.TextPrimary,
   onClick,
   className,
+  maxWidth,
 }: ChipProps) => {
   return (
     <StyledContainer
@@ -140,6 +140,7 @@ export const Chip = ({
       variant={variant}
       onClick={onClick}
       className={className}
+      maxWidth={maxWidth}
     >
       {leftComponent}
       <OverflowingTextWithTooltip size={size} text={label} />