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 (
{chip}
- ) : (
- 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 (
{leftComponent}