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-front/src/modules/ui/field/display/components/TextDisplay.tsx

@@ -6,5 +6,9 @@ type TextDisplayProps = {
 };
 
 export const TextDisplay = ({ text, displayedMaxRows }: TextDisplayProps) => (
-  <OverflowingTextWithTooltip text={text} displayedMaxRows={displayedMaxRows} />
+  <OverflowingTextWithTooltip
+    text={text}
+    displayedMaxRows={displayedMaxRows}
+    isTooltipMultiline={true}
+  />
 );

packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx

@@ -34,6 +34,7 @@ const StyledTextArea = styled(TextareaAutosize)`
   max-height: 400px;
   width: calc(100% - ${({ theme }) => theme.spacing(7)});
   background: transparent;
+  line-height: 18px;
 `;
 
 const StyledTextAreaContainer = styled.div`
@@ -41,7 +42,9 @@ const StyledTextAreaContainer = styled.div`
   border: ${({ theme }) => `1px solid ${theme.border.color.medium}`};
   position: relative;
   width: 100%;
-  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(0)};
+  padding-top: ${({ theme }) => theme.spacing(2)};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+
   border-radius: ${({ theme }) => theme.border.radius.sm};
 
   @supports (
@@ -56,7 +59,7 @@ const StyledTextAreaContainer = styled.div`
 const StyledLightIconButtonContainer = styled.div`
   background: transparent;
   position: absolute;
-  top: 50%;
+  top: 18px;
   transform: translateY(-50%);
   right: 0;
 `;