[data grid] styling cells with extra padding breaks horizontal scroll limit

[wilcoschoneveld]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/cold-grass-tcf2t5
2. Scroll all the way to the right
3. Scroll even further with horizontal mouse wheel

Current behavior

scrolls out of bounds

Expected behavior

scroll stays in bound

Context

Our design requires some additional padding in both the column headers and the grid cells compared to the default.

Your environment

see codesandbox

Search keywords: data grid cell padding

Order ID: 96051

[MBilalShafi]

It happens because we have filler cells at the end of each row, which also target the generic cell class (.MuiDataGrid-cell). You could avoid it by using the :not pseudo selector.

"& .MuiDataGrid-cell:not(.MuiDataGrid-cellEmpty)": {
  paddingLeft: 3,
  paddingRight: 3,
},

Here's the updated sandbox: https://codesandbox.io/p/sandbox/keen-bhabha-xrt2gx?file=%2Fsrc%2FDemo.tsx%3A59%2C11-62%2C13

Does it work for you?

P.S. @mui/xgrid We should probably mention this in styling cells section.

[wilcoschoneveld]

@MBilalShafi yes this works! Thanks a lot for the quick reply!

[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

@wilcoschoneveld How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.