line breaks in tooltips & text (#8783)

This feature goal is to :

1 - clean variables not used any longer

2 - add line breaks for tooltips and text wrapped

<img width="329" alt="Screenshot 2024-11-27 at 18 37 18"
src="https://github.com/user-attachments/assets/b3d7ed76-df30-4377-9d73-08d55c0f5c49">
<img width="468" alt="Screenshot 2024-11-27 at 18 37 31"
src="https://github.com/user-attachments/assets/48ef343e-6071-4a89-a73f-fb271f8284c0">


Request From @Bonapara

---------

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

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

@@ -12,8 +12,6 @@ const StyledOverflowingText = styled.div<{
   cursorPointer: boolean;
   size: 'large' | 'small';
   displayedMaxRows?: number;
-  isLabel: boolean;
-  allowDisplayWrap?: boolean;
 }>`
   cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'inherit')};
   font-family: inherit;
@@ -25,7 +23,7 @@ const StyledOverflowingText = styled.div<{
   text-decoration: inherit;
 
   text-overflow: ellipsis;
-
+  white-space: pre-wrap;
   height: ${({ size }) => (size === 'large' ? spacing4 : 'auto')};
 
   text-wrap: wrap;
@@ -42,20 +40,21 @@ const StyledOverflowingText = styled.div<{
   }
 `;
 
+const Styledpre = styled.pre`
+  font-family: inherit;
+  white-space: pre-wrap;
+`;
+
 export const OverflowingTextWithTooltip = ({
   size = 'small',
   text,
   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()}`;
 
@@ -81,7 +80,6 @@ export const OverflowingTextWithTooltip = ({
     event.stopPropagation();
     event.preventDefault();
   };
-
   return (
     <>
       <StyledOverflowingText
@@ -89,8 +87,6 @@ export const OverflowingTextWithTooltip = ({
         cursorPointer={isTitleOverflowing}
         size={size}
         displayedMaxRows={displayedMaxRows}
-        allowDisplayWrap={allowDisplayWrap}
-        isLabel={isLabel ?? false}
         ref={textRef}
         id={textElementId}
         onMouseEnter={handleMouseEnter}
@@ -103,7 +99,6 @@ export const OverflowingTextWithTooltip = ({
           <div onClick={handleTooltipClick}>
             <AppTooltip
               anchorSelect={`#${textElementId}`}
-              content={isTooltipMultiline ? undefined : (text ?? '')}
               offset={5}
               isOpen
               noArrow
@@ -111,7 +106,11 @@ export const OverflowingTextWithTooltip = ({
               positionStrategy="absolute"
               delay={TooltipDelay.mediumDelay}
             >
-              {isTooltipMultiline ? <pre>{text}</pre> : ''}
+              {isTooltipMultiline ? (
+                <Styledpre>{text}</Styledpre>
+              ) : (
+                `${text || ''}`
+              )}
             </AppTooltip>
           </div>,
           document.body,