houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make entire first cell clickable (#14925)

Browse Source 
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
This commit is contained in:
Paul Vernin
2025-10-07 07:50:08 +02:00
committed by GitHub
parent 0fd6085b53
commit f0ad005f8f
1 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderFirstCell.tsx
+16 -14
View File
@@ -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>
);