The 3 dots "kebab" icon is too close to the column divider. Accessibility/ user experience issue

[Utkarshk7]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The 3 dots "kebab" icon is too close to the column divider. As a result, even if we place the cursor exactly on the three dots, it is not clickable.

We have to precisely move cursor to the left and then click on it.

End users have reported this as accessibility/user experience issue. Do we have any fix for this please?

Expected behavior 🤔

When we place cursor on the 3 dots "kebab" icon, it should always be clickable.

Steps to reproduce 🕹

Steps:

1. Use Datagrid Pro
2. Click on 3 dots "kebab" icon
3. It is not always clickable
4. Move the cursor to the left/right carefully to see where it is clickable. Then only it works

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)

#39429

[cherniavskii]

As a workaround, you can do this for now:

<DataGridPro
  sx={{
    [`& .${gridClasses.menuIconButton}`]: {
      marginRight: "8px"
    }
  }}
/>

Here's working demo: https://codesandbox.io/s/columnsizinggrid-material-demo-forked-y1qxfx?file=/demo.tsx:399-508

[Utkarshk7]

Thanks! This helped ..