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