From 01fc70da0f60eb97b5fae082b64896bbca75f260 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= <jeremy.magrin@gmail.com>
Date: Wed, 18 Dec 2024 16:35:08 +0100
Subject: [PATCH] fix: 3 first columns should be sticky view group (#9123)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix #9113

<img width="591" alt="Screenshot 2024-12-18 at 3 33 05 PM"
src="https://github.com/user-attachments/assets/df55eff3-7b0d-4cf0-881b-167e1bf2f97b"
/>

<img width="543" alt="Screenshot 2024-12-18 at 3 34 37 PM"
src="https://github.com/user-attachments/assets/76fe06e1-0a46-4130-921d-1d480306bda2"
/>
---
 .../record-table-body/components/RecordTableBodyDroppable.tsx  | 2 +-
 .../record-table-row/components/RecordTableActionRow.tsx       | 3 ++-
 .../components/RecordTableRecordGroupSection.tsx               | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx
index c8a41ef953..f2e19d7506 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx
@@ -23,7 +23,7 @@ export const RecordTableBodyDroppable = ({
     >
       {(provided) => (
         <RecordTableBody
-          id={`record-table-body${recordGroupId ? `-${recordGroupId}` : ''}`}
+          id="record-table-body"
           ref={provided.innerRef}
           // eslint-disable-next-line react/jsx-props-no-spreading
           {...provided.droppableProps}
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx
index a50a889c64..9808409ba5 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx
@@ -65,9 +65,10 @@ export const RecordTableActionRow = ({
       <StyledIconContainer>
         <LeftIcon size={theme.icon.size.sm} color={theme.font.color.tertiary} />
       </StyledIconContainer>
-      <StyledRecordTableTdTextContainer colSpan={visibleTableColumns.length}>
+      <StyledRecordTableTdTextContainer>
         <StyledText>{text}</StyledText>
       </StyledRecordTableTdTextContainer>
+      <StyledEmptyTd colSpan={visibleTableColumns.length - 1} />
       <StyledEmptyTd />
       <StyledEmptyTd />
     </StyledRecordTableDraggableTr>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx
index 708fa50db4..9274eb501d 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx
@@ -91,7 +91,7 @@ export const RecordTableRecordGroupSection = () => {
           <IconChevronUp size={theme.icon.size.md} />
         </motion.span>
       </StyledChevronContainer>
-      <StyledRecordGroupSection colSpan={visibleColumns.length}>
+      <StyledRecordGroupSection>
         <Tag
           variant={
             recordGroup.type !== RecordGroupDefinitionType.NoValue
@@ -108,6 +108,7 @@ export const RecordTableRecordGroupSection = () => {
         />
         <StyledTotalRow>{recordIdsByGroup.length}</StyledTotalRow>
       </StyledRecordGroupSection>
+      <StyledEmptyTd colSpan={visibleColumns.length - 1} />
       <StyledEmptyTd />
       <StyledEmptyTd />
     </StyledTrContainer>