From 679530020c13927b20daec818711b0a07f9214ee Mon Sep 17 00:00:00 2001
From: Etienne <45695613+etiennejouan@users.noreply.github.com>
Date: Mon, 12 May 2025 14:13:59 +0200
Subject: [PATCH] increase recordCard field hovering zone width + click
 (recordCard and summaryCard) (#11983)

PR preview


https://github.com/user-attachments/assets/7d90f384-6bee-41d7-9aec-cadb434e7db6



closes https://github.com/twentyhq/twenty/issues/10561
---
 .../components/StopPropagationContainer.tsx   |  5 ++---
 .../components/RecordInlineCellContainer.tsx  | 20 +++++++++++++++++--
 .../components/RecordInlineCellValue.tsx      | 14 ++-----------
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/StopPropagationContainer.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/StopPropagationContainer.tsx
index 417c522e6..f5769d27e 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/StopPropagationContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/StopPropagationContainer.tsx
@@ -1,11 +1,10 @@
-import { ReactNode } from 'react';
 import styled from '@emotion/styled';
+import { ReactNode } from 'react';
 
 const StyledFieldContainer = styled.div`
   display: flex;
   flex-direction: row;
-  width: fit-content;
-  max-width: 100%;
+  width: 100%;
 `;
 
 export const StopPropagationContainer = ({
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 adac60d49..0ca058098 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
@@ -9,6 +9,7 @@ import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInput
 
 import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata';
 import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
+import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
 import {
   AppTooltip,
   OverflowingTextWithTooltip,
@@ -86,8 +87,14 @@ export const StyledSkeletonDiv = styled.div`
 `;
 
 export const RecordInlineCellContainer = () => {
-  const { readonly, IconLabel, label, labelWidth, showLabel } =
-    useRecordInlineCellContext();
+  const {
+    readonly,
+    IconLabel,
+    label,
+    labelWidth,
+    showLabel,
+    editModeContentOnly,
+  } = useRecordInlineCellContext();
 
   const { recordId, fieldDefinition } = useContext(FieldContext);
 
@@ -97,6 +104,14 @@ export const RecordInlineCellContainer = () => {
 
   const { setIsFocused } = useFieldFocus();
 
+  const { openInlineCell } = useInlineCell();
+
+  const handleDisplayModeClick = () => {
+    if (!readonly && !editModeContentOnly) {
+      openInlineCell();
+    }
+  };
+
   const handleContainerMouseEnter = () => {
     if (!readonly) {
       setIsFocused(true);
@@ -119,6 +134,7 @@ export const RecordInlineCellContainer = () => {
     <StyledInlineCellBaseContainer
       onMouseEnter={handleContainerMouseEnter}
       onMouseLeave={handleContainerMouseLeave}
+      onClick={handleDisplayModeClick}
     >
       {(IconLabel || label) && (
         <StyledLabelAndIconContainer id={labelId}>
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
index b88fc44a8..e9ff2c3d3 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
@@ -39,13 +39,7 @@ export const RecordInlineCellValue = () => {
     isCentered,
   } = useRecordInlineCellContext();
 
-  const { isInlineCellInEditMode, openInlineCell } = useInlineCell();
-
-  const handleDisplayModeClick = () => {
-    if (!readonly && !editModeContentOnly) {
-      openInlineCell();
-    }
-  };
+  const { isInlineCellInEditMode } = useInlineCell();
 
   if (loading === true) {
     return <RecordInlineCellSkeletonLoader />;
@@ -63,11 +57,7 @@ export const RecordInlineCellValue = () => {
           </RecordInlineCellDisplayMode>
         </StyledClickableContainer>
       ) : (
-        <StyledClickableContainer
-          readonly={readonly}
-          onClick={handleDisplayModeClick}
-          isCentered={isCentered}
-        >
+        <StyledClickableContainer readonly={readonly} isCentered={isCentered}>
           <RecordInlineCellDisplayMode>
             {displayModeContent}
           </RecordInlineCellDisplayMode>