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 } =
-    useRecordInlineCellContext();
+  const {
+    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 ? (