From d8034b1f40aebc6eafab9cec6132aa6cb97d1d02 Mon Sep 17 00:00:00 2001
From: martmull <martmull@hotmail.fr>
Date: Mon, 17 Jun 2024 10:17:31 +0200
Subject: [PATCH] 5236 expandable list leave options when editing (#5890)

Fixes https://github.com/twentyhq/twenty/issues/5236
## After

![image](https://github.com/twentyhq/twenty/assets/29927851/5f0f910c-11b0-40ce-9c59-34e7ce0c2741)
---
 .../ActivityTargetInlineCellEditMode.tsx      |  4 +-
 .../components/RecordInlineCellContainer.tsx  |  3 +-
 .../components/RecordInlineCellValue.tsx      | 65 ++++++++++---------
 .../components/RecordTableCellContainer.tsx   | 15 ++---
 .../components/RecordTableCellEditMode.tsx    |  1 +
 5 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx b/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx
index 0c884b203..bec5740b5 100644
--- a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx
+++ b/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx
@@ -22,9 +22,9 @@ import { ObjectRecordForSelect } from '@/object-record/relation-picker/hooks/use
 import { prefillRecord } from '@/object-record/utils/prefillRecord';
 
 const StyledSelectContainer = styled.div`
-  left: 0px;
   position: absolute;
-  top: -8px;
+  left: 0;
+  top: 0;
 `;
 
 type ActivityTargetInlineCellEditModeProps = {
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 cb2d67b7a..1514ec9f3 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
@@ -34,7 +34,8 @@ const StyledLabelAndIconContainer = styled.div`
 
 const StyledValueContainer = styled.div`
   display: flex;
-  width: 100%;
+  flex-grow: 1;
+  min-width: 0;
 `;
 
 const StyledLabelContainer = styled.div<{ width?: number }>`
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 a1042ddd0..08a5cadba 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
@@ -72,35 +72,40 @@ export const RecordInlineCellValue = ({
     return <RecordInlineCellSkeletonLoader />;
   }
 
-  return !readonly && isInlineCellInEditMode ? (
-    <RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode>
-  ) : editModeContentOnly ? (
-    <StyledClickableContainer readonly={readonly}>
-      <RecordInlineCellDisplayMode
-        disableHoverEffect={disableHoverEffect}
-        isDisplayModeContentEmpty={isDisplayModeContentEmpty}
-        isDisplayModeFixHeight={isDisplayModeFixHeight}
-        isHovered={isFocused}
-        emptyPlaceholder={showLabel ? 'Empty' : label}
-      >
-        {editModeContent}
-      </RecordInlineCellDisplayMode>
-    </StyledClickableContainer>
-  ) : (
-    <StyledClickableContainer
-      readonly={readonly}
-      onClick={handleDisplayModeClick}
-    >
-      <RecordInlineCellDisplayMode
-        disableHoverEffect={disableHoverEffect}
-        isDisplayModeContentEmpty={isDisplayModeContentEmpty}
-        isDisplayModeFixHeight={isDisplayModeFixHeight}
-        isHovered={isFocused}
-        emptyPlaceholder={showLabel ? 'Empty' : label}
-      >
-        {displayModeContent}
-      </RecordInlineCellDisplayMode>
-      {showEditButton && <RecordInlineCellButton Icon={buttonIcon} />}
-    </StyledClickableContainer>
+  return (
+    <>
+      {!readonly && isInlineCellInEditMode && (
+        <RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode>
+      )}
+      {editModeContentOnly ? (
+        <StyledClickableContainer readonly={readonly}>
+          <RecordInlineCellDisplayMode
+            disableHoverEffect={disableHoverEffect}
+            isDisplayModeContentEmpty={isDisplayModeContentEmpty}
+            isDisplayModeFixHeight={isDisplayModeFixHeight}
+            isHovered={isFocused}
+            emptyPlaceholder={showLabel ? 'Empty' : label}
+          >
+            {editModeContent}
+          </RecordInlineCellDisplayMode>
+        </StyledClickableContainer>
+      ) : (
+        <StyledClickableContainer
+          readonly={readonly}
+          onClick={handleDisplayModeClick}
+        >
+          <RecordInlineCellDisplayMode
+            disableHoverEffect={disableHoverEffect}
+            isDisplayModeContentEmpty={isDisplayModeContentEmpty}
+            isDisplayModeFixHeight={isDisplayModeFixHeight}
+            isHovered={isFocused}
+            emptyPlaceholder={showLabel ? 'Empty' : label}
+          >
+            {displayModeContent}
+          </RecordInlineCellDisplayMode>
+          {showEditButton && <RecordInlineCellButton Icon={buttonIcon} />}
+        </StyledClickableContainer>
+      )}
+    </>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
index 6ff27ac73..48b3f5ce2 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
@@ -142,15 +142,14 @@ export const RecordTableCellContainer = ({
             [styles.cellBaseContainerSoftFocus]: hasSoftFocus,
           })}
         >
-          {isInEditMode ? (
+          {isInEditMode && (
             <RecordTableCellEditMode>{editModeContent}</RecordTableCellEditMode>
-          ) : hasSoftFocus ? (
-            <>
-              <RecordTableCellSoftFocusMode
-                editModeContent={editModeContent}
-                nonEditModeContent={nonEditModeContent}
-              />
-            </>
+          )}
+          {hasSoftFocus ? (
+            <RecordTableCellSoftFocusMode
+              editModeContent={editModeContent}
+              nonEditModeContent={nonEditModeContent}
+            />
           ) : (
             <RecordTableCellDisplayMode>
               {nonEditModeContent}
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
index 99c52de42..16e59db8d 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
 
 const StyledEditableCellEditModeContainer = styled.div<RecordTableCellEditModeProps>`
+  position: absolute;
   align-items: center;
   display: flex;
   min-width: 200px;