[DataGrid] Column headers separators covers a portion of the menu button

[jvega190]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The menu button of the column headers (to show actions menu) is not entirely clickable, it seems like the header separator is covering a part of the button.

Expected behavior 🤔

The whole menu button of the columns headers should be clickable.

Steps to reproduce 🕹

Steps:

1. https://codesandbox.io/s/data-grid-community-forked-0r303e
2. Try to click on the right part of a menu button of a column header (see how it doesn't hover until you react the icon of the button).

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID 💳 (optional)

No response

[m4theushw]

The resize icon has 24px, but most of it is empty because the actual icon is only a vertical line. Since it's absolutely positioned, there's a conflict between the menu icon. I think we could use a custom resize icon, still based on the MUI icon, but taking less space. As example, AG Grid uses only 8px for the resize icon, while we use 24px. We could also play with increasing the right margin between the menu icon and separator.

[cherniavskii]

This was reported earlier in #4192 as well

[KenanYusuf]

Fixed in #14293

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @jvega190! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!