Fix Table text wrapping (#8683)

As discovered during the last release, text fields in the table were
wrapped. This PR fixes this unwanted behaviour

Current :
<img width="1077" alt="Screenshot 2024-11-22 at 14 17 42"
src="https://github.com/user-attachments/assets/080c5b1f-b793-46de-8733-9c69a4eb6b3b">

Wanted : 
One line ellipsed
<img width="244" alt="Screenshot 2024-11-22 at 14 20 46"
src="https://github.com/user-attachments/assets/c1d32859-4ffe-42e3-bfed-66db20c8c0c7">

---------

Co-authored-by: guillim <guillaume@twenty.com>

packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts

@@ -31,6 +31,7 @@ export type GenericFieldContextType = {
   maxWidth?: number;
   isCentered?: boolean;
   overridenIsFieldEmpty?: boolean;
+  displayedMaxRows?: number;
 };
 
 export const FieldContext = createContext<GenericFieldContextType>(

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

@@ -3,11 +3,19 @@ import { isFieldText } from '@/object-record/record-field/types/guards/isFieldTe
 import { TextDisplay } from '@/ui/field/display/components/TextDisplay';
 
 export const TextFieldDisplay = () => {
-  const { fieldValue, fieldDefinition } = useTextFieldDisplay();
+  const { fieldValue, fieldDefinition, displayedMaxRows } =
+    useTextFieldDisplay();
 
-  const displayedMaxRows = isFieldText(fieldDefinition)
+  const displayedMaxRowsFromSettings = isFieldText(fieldDefinition)
     ? fieldDefinition.metadata?.settings?.displayedMaxRows
-    : 1;
+    : undefined;
 
-  return <TextDisplay text={fieldValue} displayedMaxRows={displayedMaxRows} />;
+  return (
+    <TextDisplay
+      text={fieldValue}
+      displayedMaxRows={
+        displayedMaxRows ? displayedMaxRows : displayedMaxRowsFromSettings
+      }
+    />
+  );
 };

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

@@ -5,7 +5,8 @@ import { useRecordFieldValue } from '@/object-record/record-store/contexts/Recor
 import { FieldContext } from '../../contexts/FieldContext';
 
 export const useTextFieldDisplay = () => {
-  const { recordId, fieldDefinition, hotkeyScope } = useContext(FieldContext);
+  const { recordId, fieldDefinition, hotkeyScope, displayedMaxRows } =
+    useContext(FieldContext);
 
   const fieldName = fieldDefinition.metadata.fieldName;
 
@@ -16,5 +17,6 @@ export const useTextFieldDisplay = () => {
     fieldDefinition,
     fieldValue,
     hotkeyScope,
+    displayedMaxRows,
   };
 };

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx

@@ -131,7 +131,11 @@ export const RecordInlineCellContainer = () => {
           )}
           {showLabel && label && (
             <StyledLabelContainer width={labelWidth}>
-              <OverflowingTextWithTooltip text={label} isLabel={true} />
+              <OverflowingTextWithTooltip
+                text={label}
+                isLabel={true}
+                displayedMaxRows={1}
+              />
             </StyledLabelContainer>
           )}
           {/* TODO: Displaying Tooltips on the board is causing performance issues https://react-tooltip.com/docs/examples/render */}

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx

@@ -50,6 +50,7 @@ export const RecordTableCellFieldContextWrapper = ({
           },
           objectMetadataItem,
         }),
+        displayedMaxRows: 1,
       }}
     >
       {children}