From f0ad005f8f1f5d9594af3845e311014c442af9d5 Mon Sep 17 00:00:00 2001
From: Paul Vernin <78180340+Paul-vrn@users.noreply.github.com>
Date: Tue, 7 Oct 2025 07:50:08 +0200
Subject: [PATCH] Make entire first cell clickable (#14925)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Solution:
I removed the specific layout of the first cell that was reducing the
clickable area to make room for the “+” button.
Instead, I added a layout to the button, so it’s position absolute,
allowing the clickable area to cover 100% of the cell while keeping the
button above it.
Another possible solution would be to modify
`RecordTableColumnHeadWithDropdown` to include the button inside...

- Manual test:
[Loom](https://www.loom.com/share/4ceb4daa07e5457a99a07a2489db2960?sid=15959502-e272-44bd-923a-5764d077642d)
- Issue: https://github.com/twentyhq/twenty/issues/14900
---
 .../components/RecordTableHeaderFirstCell.tsx | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderFirstCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderFirstCell.tsx
index 1876559b9b..2c4cb6bdfe 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderFirstCell.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderFirstCell.tsx
@@ -7,6 +7,7 @@ import { RecordTableHeaderResizeHandler } from '@/object-record/record-table/rec
 import { RecordTableHeaderCellContainer } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCellContainer';
 
 import { hasRecordGroupsComponentSelector } from '@/object-record/record-group/states/selectors/hasRecordGroupsComponentSelector';
+import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
 import { RecordTableHeaderLabelIdentifierCellPlusButton } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderLabelIdentifierCellPlusButton';
 import { getVisibleFieldWithLowestPosition } from '@/object-record/record-table/record-table-header/utils/getVisibleFieldWithLowestPosition.util';
 import { isRecordTableRowActiveComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowActiveComponentFamilyState';
@@ -21,13 +22,11 @@ import { cx } from '@linaria/core';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
-const StyledColumnHeadContainer = styled.div`
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  overflow: hidden;
+const StyledPlusButtonWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: ${TABLE_Z_INDEX.headerColumns.withoutGroups.headerColumnsSticky};
 `;
 
 export const RecordTableHeaderFirstCell = () => {
@@ -85,13 +84,16 @@ export const RecordTableHeaderFirstCell = () => {
       shouldDisplayBorderBottom={shouldDisplayBorderBottom}
       isResizing={isResizingAnyColumn}
     >
-      <StyledColumnHeadContainer>
-        <RecordTableColumnHeadWithDropdown
-          recordField={recordField}
-          objectMetadataId={objectMetadataItem.id}
-        />
-        {iconIsVisible && <RecordTableHeaderLabelIdentifierCellPlusButton />}
-      </StyledColumnHeadContainer>
+      <RecordTableColumnHeadWithDropdown
+        recordField={recordField}
+        objectMetadataId={objectMetadataItem.id}
+      />
+      {iconIsVisible && (
+        <StyledPlusButtonWrapper>
+          <RecordTableHeaderLabelIdentifierCellPlusButton />
+        </StyledPlusButtonWrapper>
+      )}
+
       <RecordTableHeaderResizeHandler recordFieldIndex={0} position="right" />
     </RecordTableHeaderCellContainer>
   );