[data grid] Extraneous scrollbar in footer pagination area when using CssBaseline

filipneculciu commented 1 month ago

Steps to reproduce

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

Steps to reproduce:

Load the page with the data grid (in the CodeSandbox, in a new tab)
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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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:

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

michelengelen commented 1 month ago

FYI: I cannot reproduce this in any of the browsers I have installed. neither with the provided sandbox link nor with my local instance running the example from this p[age: Enabling pagination

Might be OS related (I am on MacOS). I'll try it on a windows machine later today as well.

epicstar commented 1 month ago

I actually have this issue on my side, too. But I'm not using CssBaseline.... As my datagrid grows, the footer's height decreases. Why? No clue!!!! I'm on v7.19.0.

Other than that, I guess my font size is probably bigger than the default mui settings.

Our workaround so far is disabling overflow on the MuiTablePagination-root:

  <DataGrid sx={{
    '.MuiTablePagination-root': {
      overflow: 'hidden',
    },
   }}/>

This doesn't fix the weird footer height change bug, but it completely removes the extremely freaky scrollbar.

michelengelen commented 1 month ago

@epicstar could you open a separate issue for this please?

michelengelen commented 1 month ago

I could not replicate this on my windows machine using Chrome or Firefox. @filipneculciu did you apply any custom styling?

filipneculciu commented 1 month ago

@michelengelen I'm not sure what you mean, in the sandbox I have used the sx prop on the Container and Box that surround the data grid (to set sizes, margin and padding) and I have used as mentioned (in index.tsx). But all of this should be visible already in the sandbox code.

In the real app, I'm using the a custom theme, but that's probably not relevant, as it is reproducible for me with just what's in the sandbox. I had 4 colleagues try out the preview link for the sandbox: https://y3v44k.csb.app/ and it was reproducible for all of them (three on them are on Windows 11 and one is on Windows 10).

michelengelen commented 1 month ago

Yes @filipneculciu sry ... I misread that! 🙇🏼 We are investigating, but it is a weird bug and seems more related to the OS/browser combination. Would you be able to send us a link to the app you are using this in?

cherniavskii commented 1 month ago

Applying the following styles seems to fix the issue:

<DataGrid
  sx={{
    "& .MuiDataGrid-footerContainer": {
      boxSizing: "content-box",
    },
  }}
/>

Here's an updated demo: https://codesandbox.io/p/sandbox/broken-pine-6kr7vq

@filipneculciu Can you confirm that it fixes the issue for you?

filipneculciu commented 1 month ago

@michelengelen Regarding the link: No, it's not a public website nor are there any publicly accessible demo systems.

@cherniavskii Yes, the "sx" prop you mentioned fixes the issue for me. Could you, please, let me know the plan is for this workaround to no longer be necessary in some future version of MUI X?

cherniavskii commented 1 month ago

@filipneculciu Thanks for the confirmation! I've opened https://github.com/mui/mui-x/pull/14911 to address this on our side.

github-actions[bot] commented 1 month ago

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] @filipneculciu 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.

mui / mui-x