Make entire first cell clickable

[pvrnn]

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
• Issue: Make Entire Table Header Cell Clickable for Field Menu #14900

[greptile-apps]

Greptile Overview

Summary

This PR improves the user experience of the record table by making the entire first cell clickable while preserving the plus button functionality. The change refactors the layout structure in `RecordTableHeaderFirstCell` component by removing the previous flex-based layout that was splitting the cell into separate clickable areas.

The original implementation used a StyledColumnHeadContainer with display: flex and justify-content: space-between that created two distinct clickable zones - one for the field dropdown and one for the plus button. This meant users could only click on the text/icon portion to open the field menu, not the entire cell area.

The solution repositions the plus button using absolute positioning (position: absolute, top: 0, right: 0, z-index: 2) while allowing the RecordTableColumnHeadWithDropdown component to span the full width of the cell. This achieves the desired UX where clicking anywhere in the cell opens the field dropdown menu, but clicking specifically on the plus button still triggers record creation. The higher z-index ensures the plus button captures click events before the underlying dropdown component.

This change integrates well with the existing table architecture, maintaining all existing functionality while improving the clickable area accessibility. The RecordTableColumnHeadWithDropdown component already wraps its content in a Dropdown component, so expanding its coverage to the full cell naturally extends the clickable area without requiring changes to the dropdown logic.

Important Files Changed

Changed Files

Filename	Score	Overview
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderFirstCell.tsx	4/5	Refactored first table header cell layout to make entire cell clickable by removing flex container and using absolute positioning for plus button

Confidence score: 4/5

• This PR is safe to merge with minimal risk as it only changes layout positioning without affecting core functionality
• Score reflects a solid UI improvement with straightforward implementation that maintains existing behavior
• Pay close attention to potential z-index conflicts and ensure the plus button remains accessible on all screen sizes

Sequence Diagram

sequenceDiagram
    participant User
    participant RecordTableHeaderFirstCell
    participant RecordTableHeaderCellContainer
    participant RecordTableColumnHeadWithDropdown
    participant StyledPlusButtonWrapper
    participant RecordTableHeaderLabelIdentifierCellPlusButton
    participant RecordTableHeaderResizeHandler

    User->>RecordTableHeaderFirstCell: "Mouse enters cell area"
    RecordTableHeaderFirstCell->>RecordTableHeaderFirstCell: "setIconIsVisible(true)"
    RecordTableHeaderFirstCell->>RecordTableHeaderCellContainer: "Render with onMouseEnter handler"
    RecordTableHeaderCellContainer->>RecordTableColumnHeadWithDropdown: "Render column head with dropdown"
    RecordTableHeaderFirstCell->>StyledPlusButtonWrapper: "Conditionally render (iconIsVisible=true)"
    StyledPlusButtonWrapper->>RecordTableHeaderLabelIdentifierCellPlusButton: "Render plus button with absolute positioning"
    RecordTableHeaderFirstCell->>RecordTableHeaderResizeHandler: "Render resize handler"

    User->>RecordTableHeaderFirstCell: "Mouse leaves cell area"
    RecordTableHeaderFirstCell->>RecordTableHeaderFirstCell: "setIconIsVisible(false)"
    RecordTableHeaderFirstCell->>StyledPlusButtonWrapper: "Hide plus button wrapper"

    User->>RecordTableColumnHeadWithDropdown: "Click on cell area"
    Note over RecordTableColumnHeadWithDropdown: "Full cell area is now clickable due to absolute positioning of plus button"

Loading

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:38509

This environment will automatically shut down when the PR is closed or after 5 hours.

[FelixMalfait]

Can you please use TABLE_Z_INDEX.headerColumnswithoutGroups.headerColumnsSticky and check if it still works? Thanks!

[FelixMalfait]

Especially when scrolling on small screen / try edge cases

[pvrnn]

Hey, thanks for the quick feedback, I added 2 screenshots for Ipad and Iphone dimension.

I just noticed that on phone dimension (with or without my changes), when it’s in “mini size” (just company logo, no name) and I click on the header first cell, it doesn’t show the dropdown or the “+” button, but I guess that’s WAD?

[pvrnn]

Ipad dimension:

Iphone SE dimension:

[FelixMalfait]

Thank you, great work!

[github-actions]

Thanks @Paul-vrn for your contribution!
This marks your 1st PR on the repo. You're top 40% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter