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}

packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx

@@ -13,6 +13,7 @@ const StyledOverflowingText = styled.div<{
   size: 'large' | 'small';
   displayedMaxRows?: number;
   isLabel: boolean;
+  allowDisplayWrap?: boolean;
 }>`
   cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'inherit')};
   font-family: inherit;
@@ -24,18 +25,14 @@ const StyledOverflowingText = styled.div<{
   text-decoration: inherit;
 
   text-overflow: ellipsis;
-  white-space: nowrap;
 
   height: ${({ size }) => (size === 'large' ? spacing4 : 'auto')};
 
-  text-wrap-mode: ${({ isLabel, displayedMaxRows }) =>
-    isLabel === false && displayedMaxRows ? 'wrap' : 'nowrap'};
-  -webkit-line-clamp: ${({ isLabel, displayedMaxRows }) =>
-    isLabel === false && displayedMaxRows ? displayedMaxRows : 'inherit'};
-  display: ${({ isLabel, displayedMaxRows }) =>
-    isLabel === false && displayedMaxRows ? `-webkit-box` : 'block'};
-  -webkit-box-orient: ${({ isLabel, displayedMaxRows }) =>
-    isLabel === false && displayedMaxRows ? 'vertical' : 'inherit'};
+  text-wrap: wrap;
+  -webkit-line-clamp: ${({ displayedMaxRows }) =>
+    displayedMaxRows ? displayedMaxRows : '1'};
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
 
   & :hover {
     text-overflow: ${({ cursorPointer }) =>
@@ -51,12 +48,14 @@ export const OverflowingTextWithTooltip = ({
   isTooltipMultiline,
   displayedMaxRows,
   isLabel,
+  allowDisplayWrap,
 }: {
   size?: 'large' | 'small';
   text: string | null | undefined;
   isTooltipMultiline?: boolean;
   displayedMaxRows?: number;
   isLabel?: boolean;
+  allowDisplayWrap?: boolean;
 }) => {
   const textElementId = `title-id-${+new Date()}`;
 
@@ -90,6 +89,7 @@ export const OverflowingTextWithTooltip = ({
         cursorPointer={isTitleOverflowing}
         size={size}
         displayedMaxRows={displayedMaxRows}
+        allowDisplayWrap={allowDisplayWrap}
         isLabel={isLabel ?? false}
         ref={textRef}
         id={textElementId}