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