Fix wrapping text side effects (#8895)

- ellipsis on the letter level instead of work level
- summaryCard title line-height diffferent from the record line-height

packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts

@@ -32,6 +32,7 @@ export type GenericFieldContextType = {
   isCentered?: boolean;
   overridenIsFieldEmpty?: boolean;
   displayedMaxRows?: number;
+  isDisplayModeFixHeight?: boolean;
 };
 
 export const FieldContext = createContext<GenericFieldContextType>(

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

@@ -27,7 +27,8 @@ type RecordInlineCellProps = {
 };
 
 export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => {
-  const { fieldDefinition, recordId, isCentered } = useContext(FieldContext);
+  const { fieldDefinition, recordId, isCentered, isDisplayModeFixHeight } =
+    useContext(FieldContext);
   const buttonIcon = useGetButtonIcon();
 
   const isFieldInputOnly = useIsFieldInputOnly();
@@ -101,7 +102,7 @@ export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => {
       />
     ),
     displayModeContent: <FieldDisplay />,
-    isDisplayModeFixHeight: undefined,
+    isDisplayModeFixHeight: isDisplayModeFixHeight,
     editModeContentOnly: isFieldInputOnly,
     loading: loading,
   };

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

@@ -1,9 +1,8 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { ReactElement, useContext } from 'react';
+import { useContext } from 'react';
 import {
   AppTooltip,
-  IconComponent,
   OverflowingTextWithTooltip,
   TooltipDelay,
 } from 'twenty-ui';
@@ -12,7 +11,6 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
 import { RecordInlineCellValue } from '@/object-record/record-inline-cell/components/RecordInlineCellValue';
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
-import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata';
 import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
@@ -56,13 +54,16 @@ const StyledLabelContainer = styled.div<{ width?: number }>`
   width: ${({ width }) => width}px;
 `;
 
-const StyledInlineCellBaseContainer = styled.div`
+const StyledInlineCellBaseContainer = styled.div<{
+  isDisplayModeFixHeight?: boolean;
+}>`
   align-items: flex-start;
   box-sizing: border-box;
   width: 100%;
   display: flex;
   height: fit-content;
-  line-height: 18px;
+  line-height: ${({ isDisplayModeFixHeight }) =>
+    isDisplayModeFixHeight ? `24px` : `18px`};
   gap: ${({ theme }) => theme.spacing(1)};
   user-select: none;
   justify-content: center;
@@ -72,25 +73,15 @@ export const StyledSkeletonDiv = styled.div`
   height: 24px;
 `;
 
-export type RecordInlineCellContainerProps = {
-  readonly?: boolean;
-  IconLabel?: IconComponent;
-  label?: string;
-  labelWidth?: number;
-  showLabel?: boolean;
-  buttonIcon?: IconComponent;
-  editModeContent?: ReactElement;
-  editModeContentOnly?: boolean;
-  displayModeContent: ReactElement;
-  customEditHotkeyScope?: HotkeyScope;
-  isDisplayModeFixHeight?: boolean;
-  disableHoverEffect?: boolean;
-  loading?: boolean;
-};
-
 export const RecordInlineCellContainer = () => {
-  const { readonly, IconLabel, label, labelWidth, showLabel } =
+  const {
-    useRecordInlineCellContext();
+    readonly,
+    IconLabel,
+    label,
+    labelWidth,
+    showLabel,
+    isDisplayModeFixHeight,
+  } = useRecordInlineCellContext();
 
   const { recordId, fieldDefinition } = useContext(FieldContext);
 
@@ -120,6 +111,7 @@ export const RecordInlineCellContainer = () => {
 
   return (
     <StyledInlineCellBaseContainer
+      isDisplayModeFixHeight={isDisplayModeFixHeight}
       onMouseEnter={handleContainerMouseEnter}
       onMouseLeave={handleContainerMouseLeave}
     >

packages/twenty-front/src/modules/object-record/record-show/components/SummaryCard.tsx

@@ -90,6 +90,7 @@ export const SummaryCard = ({
             useUpdateRecord: useUpdateOneObjectRecordMutation,
             hotkeyScope: InlineCellHotkeyScope.InlineCell,
             isCentered: !isMobile,
+            isDisplayModeFixHeight: true,
           }}
         >
           {isInRightDrawer ? (

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

@@ -4,14 +4,15 @@ import { createPortal } from 'react-dom';
 
 import { THEME_COMMON } from '@ui/theme';
 
+import { isDefined } from '@ui/utilities';
 import { AppTooltip, TooltipDelay } from './AppTooltip';
 
 const spacing4 = THEME_COMMON.spacing(4);
 
-const StyledOverflowingText = styled.div<{
+const StyledOverflowingMultilineText = styled.div<{
   cursorPointer: boolean;
   size: 'large' | 'small';
-  displayedMaxRows?: number;
+  displayedMaxRows: number;
 }>`
   cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'inherit')};
   font-family: inherit;
@@ -23,14 +24,39 @@ const StyledOverflowingText = styled.div<{
   text-decoration: inherit;
 
   text-overflow: ellipsis;
-  white-space: pre-wrap;
   height: ${({ size }) => (size === 'large' ? spacing4 : 'auto')};
 
-  text-wrap: wrap;
   -webkit-line-clamp: ${({ displayedMaxRows }) =>
-    displayedMaxRows ? displayedMaxRows : '1'};
+    displayedMaxRows ? displayedMaxRows.toString() : '1'};
   display: -webkit-box;
   -webkit-box-orient: vertical;
+  white-space: pre-wrap;
+
+  & :hover {
+    text-overflow: ${({ cursorPointer }) =>
+      cursorPointer ? 'clip' : 'ellipsis'};
+    white-space: ${({ cursorPointer }) =>
+      cursorPointer ? 'normal' : 'nowrap'};
+  }
+`;
+
+const StyledOverflowingText = styled.div<{
+  cursorPointer: boolean;
+  size: 'large' | 'small';
+}>`
+  cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'inherit')};
+  font-family: inherit;
+  font-size: inherit;
+
+  font-weight: inherit;
+  max-width: 100%;
+  overflow: hidden;
+  text-decoration: inherit;
+
+  text-overflow: ellipsis;
+  height: ${({ size }) => (size === 'large' ? spacing4 : 'auto')};
+
+  white-space: nowrap;
 
   & :hover {
     text-overflow: ${({ cursorPointer }) =>
@@ -82,18 +108,33 @@ export const OverflowingTextWithTooltip = ({
   };
   return (
     <>
-      <StyledOverflowingText
+      {isDefined(displayedMaxRows) && (
-        data-testid="tooltip"
+        <StyledOverflowingMultilineText
-        cursorPointer={isTitleOverflowing}
+          data-testid="tooltip"
-        size={size}
+          cursorPointer={isTitleOverflowing}
-        displayedMaxRows={displayedMaxRows}
+          size={size}
-        ref={textRef}
+          displayedMaxRows={displayedMaxRows}
-        id={textElementId}
+          ref={textRef}
-        onMouseEnter={handleMouseEnter}
+          id={textElementId}
-        onMouseLeave={handleMouseLeave}
+          onMouseEnter={handleMouseEnter}
-      >
+          onMouseLeave={handleMouseLeave}
-        {text}
+        >
-      </StyledOverflowingText>
+          {text}
+        </StyledOverflowingMultilineText>
+      )}
+      {!isDefined(displayedMaxRows) && (
+        <StyledOverflowingText
+          data-testid="tooltip"
+          cursorPointer={isTitleOverflowing}
+          size={size}
+          ref={textRef}
+          id={textElementId}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          {text}
+        </StyledOverflowingText>
+      )}
       {isTitleOverflowing &&
         createPortal(
           <div onClick={handleTooltipClick}>