Fixed Table Header click for options dropdown

[harshrajeevsingh]

Fixes: #9286

[greptile-apps]

PR Summary

Fixed table header cell interaction by extending the clickable area to span the full width, improving dropdown options accessibility in the record table.

• Added flex: 1 style to child divs in packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx to ensure consistent click behavior across the entire header cell width
• Resolved issue Clicking on the record table header's empty area doesn't show option until clicked on it's text #9286 where dropdown options were only appearing when clicking directly on text elements

_{1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

PR Summary

(updates since last review)

No major changes found since last review. The only modification is changing the CSS selector from & > div to & > :first-of-type in StyledColumnHeadContainer, which is just an alternative implementation of the same fix that was already covered in the previous review.

_{1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile}

[FelixMalfait]

Hey great! I checked and it works but to be honest I don't understand the fix. Would you mind explaining / do you know when this bug was introduced? Thanks a lot

[harshrajeevsingh]

@FelixMalfait The StyledColumnHeadContainer has a dropdown: RecordTableColumnHeadWithDropdown which is just a styled version of the Dropdown. The dropdown has a simple unstyled div for the clickableComponent. This unstyled div doesn't take the full width of it's parent. Therefore, clicking on the StyledColumnHeadContainer 's empty area doesn't open the dropdown.

Screencast.from.2024-12-31.20-31-51.webm

I could have resolved it by styling that particular unstyled div to take the full width of its parent. This is much simpler. However, this could have caused regression to other components with the dropdown. So, for the safer side, I went with targeting that div from the StyledColumnHeadContainer and giving it flex: 1 to take the full space.

[harshrajeevsingh]

@FelixMalfait I will try once going with the first approach of styling that div with width: 100%. If I don't find any regression, we can go with it.

[FelixMalfait]

Very clear thank you @harshrajeevsingh! I agree 100% would be more clear to the external reader. Let us know if it works or not and if not I agree we should merge your fix!

[harshrajeevsingh]

@FelixMalfait It seems that my intuition was correct here :) Giving width: 100% to that div causes regression in other components.

Screencast.from.2025-01-01.02-01-07.webm

[FelixMalfait]

Thank you!

[github-actions]

	Fails
🚫	node failed.

Log

�[31mError: �[39m SyntaxError: Unexpected token C in JSON at position 0
    at JSON.parse (<anonymous>)
�[90m    at parseJSONFromBytes (node:internal/deps/undici/undici:5584:19)�[39m
�[90m    at successSteps (node:internal/deps/undici/undici:5555:27)�[39m
�[90m    at fullyReadBody (node:internal/deps/undici/undici:1665:9)�[39m
�[90m    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)�[39m
�[90m    at async specConsumeBody (node:internal/deps/undici/undici:5564:7)�[39m
danger-results://tmp/danger-results-dd30e3d9.json

Generated by 🚫 dangerJS against 59eda08