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/object-record/components/RecordChip.tsx

@@ -7,9 +7,14 @@ import { EntityChip } from '@/ui/display/chip/components/EntityChip';
 export type RecordChipProps = {
   objectNameSingular: string;
   record: ObjectRecord;
+  maxWidth?: number;
 };
 
-export const RecordChip = ({ objectNameSingular, record }: RecordChipProps) => {
+export const RecordChip = ({
+  objectNameSingular,
+  record,
+  maxWidth,
+}: RecordChipProps) => {
   const { mapToObjectRecordIdentifier } = useObjectMetadataItem({
     objectNameSingular,
   });
@@ -23,6 +28,7 @@ export const RecordChip = ({ objectNameSingular, record }: RecordChipProps) => {
       avatarType={objectRecordIdentifier.avatarType}
       avatarUrl={objectRecordIdentifier.avatarUrl}
       linkToEntity={objectRecordIdentifier.linkToShowPage}
+      maxWidth={maxWidth}
     />
   );
 };

packages/twenty-front/src/modules/object-record/field/meta-types/display/components/RelationFieldDisplay.tsx

@@ -3,7 +3,7 @@ import { RecordChip } from '@/object-record/components/RecordChip';
 import { useRelationField } from '../../hooks/useRelationField';
 
 export const RelationFieldDisplay = () => {
-  const { fieldValue, fieldDefinition } = useRelationField();
+  const { fieldValue, fieldDefinition, maxWidth } = useRelationField();
 
   if (!fieldValue || !fieldDefinition) return null;
 
@@ -13,6 +13,7 @@ export const RelationFieldDisplay = () => {
         fieldDefinition.metadata.relationObjectMetadataNameSingular
       }
       record={fieldValue}
+      maxWidth={maxWidth}
     />
   );
 };

packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useRelationField.ts

@@ -1,6 +1,8 @@
 import { useContext } from 'react';
 import { useRecoilState } from 'recoil';
 
+import { useGetButtonIcon } from '@/object-record/field/hooks/useGetButtonIcon';
+
 import { FieldContext } from '../../contexts/FieldContext';
 import { useFieldInitialValue } from '../../hooks/useFieldInitialValue';
 import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector';
@@ -9,8 +11,8 @@ import { isFieldRelation } from '../../types/guards/isFieldRelation';
 
 // TODO: we will be able to type more precisely when we will have custom field and custom entities support
 export const useRelationField = () => {
-  const { entityId, fieldDefinition } = useContext(FieldContext);
-
+  const { entityId, fieldDefinition, maxWidth } = useContext(FieldContext);
+  const button = useGetButtonIcon();
   assertFieldMetadata('RELATION', isFieldRelation, fieldDefinition);
 
   const fieldName = fieldDefinition.metadata.fieldName;
@@ -33,5 +35,6 @@ export const useRelationField = () => {
     initialValue,
     initialSearchValue,
     setFieldValue,
+    maxWidth: button && maxWidth ? maxWidth - 28 : maxWidth,
   };
 };

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],
 };