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

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;
+  width: 100%;
-  max-width: 100%;
 `;
 
 export const StopPropagationContainer = ({

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

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 { isInlineCellInEditMode } = useInlineCell();
-
-  const handleDisplayModeClick = () => {
-    if (!readonly && !editModeContentOnly) {
-      openInlineCell();
-    }
-  };
 
   if (loading === true) {
     return <RecordInlineCellSkeletonLoader />;
@@ -63,11 +57,7 @@ export const RecordInlineCellValue = () => {
           </RecordInlineCellDisplayMode>
         </StyledClickableContainer>
       ) : (
-        <StyledClickableContainer
+        <StyledClickableContainer readonly={readonly} isCentered={isCentered}>
-          readonly={readonly}
-          onClick={handleDisplayModeClick}
-          isCentered={isCentered}
-        >
           <RecordInlineCellDisplayMode>
             {displayModeContent}
           </RecordInlineCellDisplayMode>