From 93991680a74ada04d4f4eb60d1e2f9625fbb29fa Mon Sep 17 00:00:00 2001
From: Sandheep-OSC <149194578+Sandheep-OSC@users.noreply.github.com>
Date: Tue, 10 Sep 2024 12:36:21 +0530
Subject: [PATCH] Fix/object detail recordcell tooltip (#6908)

Fixes for https://github.com/twentyhq/twenty/issues/6596

![image](https://github.com/user-attachments/assets/69014a93-a61c-4b6a-bffa-33fdb31a8511)

---------

Co-authored-by: martmull <martmull@hotmail.fr>
---
 .../components/RecordInlineCellContainer.tsx           | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
index 4c12e2541..c77c19fa8 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
@@ -1,13 +1,17 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ReactElement, useContext } from 'react';
-import { AppTooltip, IconComponent, TooltipDelay } from 'twenty-ui';
+import {
+  AppTooltip,
+  IconComponent,
+  TooltipDelay,
+  OverflowingTextWithTooltip,
+} from 'twenty-ui';
 
 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 { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { useRecordInlineCellContext } from './RecordInlineCellContext';
@@ -120,7 +124,7 @@ export const RecordInlineCellContainer = () => {
           )}
           {showLabel && label && (
             <StyledLabelContainer width={labelWidth}>
-              <EllipsisDisplay maxWidth={labelWidth}>{label}</EllipsisDisplay>
+              <OverflowingTextWithTooltip text={label} />
             </StyledLabelContainer>
           )}
           {/* TODO: Displaying Tooltips on the board is causing performance issues https://react-tooltip.com/docs/examples/render */}