[DataGridPro] Extraneous scrollbar in footer pagination area when using CssBaseline

[filipneculciu]

Steps to reproduce

https://codesandbox.io/p/sandbox/romantic-wozniak-y3v44k

Steps to reproduce:

1. Load the page with the data grid (in the CodeSandbox, in a new tab)
2. Zoom out in your browser (e.g: Control + mouse scroll wheel)

Please note that the bug is only reproducible for me with CssBaseline included in: https://codesandbox.io/p/sandbox/romantic-wozniak-y3v44k?file=%2Fsrc%2Findex.tsx%3A15%2C22

Current behavior

At some point, the pagination info disappears and a scrollbar appears instead. Please note that the scrollbar only appears at certain zoom levels and it might be browser dependent (tried on Chrome on Windows).

Expected behavior

The pagination info should be visible (though small) at any zoom out level.

Context

I am building a web application that uses a custom theme that suggest using the CssBaseline from MUI. I also have multiple DataGridPro components in my application. I'm trying to avoid this visual bug when users zoom out (zooming out is useful as it allows you to see more columns on screen at the same time).

Your environment

System:
OS: Windows 11 10.0.22631
Binaries:
Node: 22.8.0 - C:\Program Files\nodejs\node.EXE
npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (127.0.2651.105)
npmPackages:
@emotion/react: 11.11.4 => 11.11.4
@emotion/styled: 11.11.5 => 11.11.5
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.16.4
@mui/icons-material: 5.16.4 => 5.16.4
@mui/material: 5.16.4 => 5.16.4
@mui/private-theming: 5.16.4
@mui/styled-engine: 5.16.4
@mui/system: 5.16.4
@mui/types: 7.2.15
@mui/utils: 5.16.6
@mui/x-data-grid: 7.16.0
@mui/x-data-grid-pro: 7.16.0 => 7.16.0
@mui/x-date-pickers: 6.20.2
@mui/x-date-pickers-pro: 7.16.0 => 7.16.0
@mui/x-internals: 7.16.0
@mui/x-license: 7.16.0
@mui/x-license-pro: 6.10.2 => 6.10.2
@types/react: 18.3.3 => 18.3.3
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: 5.5.3 => 5.5.3

Search keywords: scrollbar CssBaseline
Order ID: 94749

[filipneculciu]

Please note that some members of my team have also noticed some errors in the console:

I couldn't reproduce them, so it might be browser/OS-dependent.

[romgrk]

I don't see how we can fit the pagination and the scrollbar in this space:

Is the zoom level illustrated there a realistic zoom level for your users? If so, have you considered alternatives such as decreasing the grid content font size?

Regarding the 2nd issue, please open a separate issue with a reproduction case. We can't debug without a reproduction case.

[filipneculciu]

I don't think the scrollbar should even be there at this zoom level, all the columns are already visible. It doesn't allow you to scroll through anything. If you zoom out even further is disappears, which looks OK:

Please note that we noticed this issue after a major version upgrade the data grid. If I downgrade to v6.18.0 in the example sandbox, it's no longer reproducible for me; it behaves the way I'd expect.

The zoom level where this occurs might be OS/browser dependent. Other people in my team had it occur at different zoom levels and with slightly different behavior; see the following screenshot from a colleague using the same sandbox link I provided:

Here the smaller scrollbar appears in addition to one for the whole table.

I'm not sure if it's realistic for users to work at the zoom level where it occurs for me, it seems borderline usable, but:

1. It seems like it might happen when less zoomed out depending on circumstances
2. If users accidentally scroll further than they'd like they will notice it and it will be visually annoying