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/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx

@@ -39,7 +39,8 @@ const StyledLabelAndIconContainer = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
-  height: 24px;
+  height: 18px;
+  padding-top: 3px;
 `;
 
 const StyledValueContainer = styled.div`
@@ -61,7 +62,7 @@ const StyledInlineCellBaseContainer = styled.div`
   width: 100%;
   display: flex;
   height: fit-content;
-  line-height: 24px;
+  line-height: 18px;
   gap: ${({ theme }) => theme.spacing(1)};
   user-select: none;
   justify-content: center;
@@ -131,11 +132,7 @@ export const RecordInlineCellContainer = () => {
           )}
           {showLabel && label && (
             <StyledLabelContainer width={labelWidth}>
-              <OverflowingTextWithTooltip
-                text={label}
-                isLabel={true}
-                displayedMaxRows={1}
-              />
+              <OverflowingTextWithTooltip text={label} 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-inline-cell/components/RecordInlineCellDisplayMode.tsx

@@ -42,13 +42,11 @@ const StyledRecordInlineCellNormalModeInnerContainer = styled.div`
   align-content: center;
   align-items: center;
   color: ${({ theme }) => theme.font.color.primary};
-  font-size: 'inherit';
-
-  font-weight: 'inherit';
+  padding-top: 3px;
+  padding-bottom: 3px;
 
   height: fit-content;
 
-  min-height: 24px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

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

@@ -46,7 +46,7 @@ export const RecordInlineCellEditMode = ({
               crossAxis: 0,
             }
           : {
-              mainAxis: -28,
+              mainAxis: -29,
               crossAxis: -4,
             },
       ),

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

@@ -37,8 +37,8 @@ export const RecordTableCellEditMode = ({
     middleware: [
       flip(),
       offset({
-        mainAxis: -32,
-        crossAxis: 0,
+        mainAxis: -31,
+        crossAxis: -2,
       }),
     ],
     whileElementsMounted: autoUpdate,