[data grid] Since upgrading to v7.x, aggregation row seems to float over the bottom of the grid

[gavbrennan]

The problem in depth

Since upgrading to v7, the total row for aggregation is no longer at the bottom of the grid but floats a few pixels above it

Your environment

`npx @mui/envinfo`

System:
OS: Windows 11 10.0.26100
Binaries:
Node: 20.12.0 - C:\Program Files\nodejs\node.EXE
npm: 7.10.0 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: 128.0.6613.113
Edge: Chromium (127.0.2651.105)
npmPackages:
@emotion/react: ^11.5.0 => 11.9.0
@emotion/styled: ^11.3.0 => 11.8.1
@mui/core-downloads-tracker: 5.16.7
@mui/icons-material: 5.16.7 => 5.16.7
@mui/lab: ^5.0.0-alpha.172 => 5.0.0-alpha.172
@mui/material: 5.16.7 => 5.16.7
@mui/private-theming: 5.16.6
@mui/styled-engine: 5.16.6 => 5.16.6
@mui/styles: 5.16.7 => 5.16.7
@mui/system: 5.16.7 => 5.16.7
@mui/types: 7.2.15
@mui/utils: 5.16.6
@mui/x-data-grid: 7.13.0
@mui/x-data-grid-generator: 7.13.0 => 7.13.0
@mui/x-data-grid-premium: 7.13.0 => 7.13.0
@mui/x-data-grid-pro: 7.13.0
@mui/x-date-pickers: 7.13.0 => 7.13.0
@mui/x-date-pickers-pro: 7.13.0 => 7.13.0
@mui/x-internals: 7.13.0
@mui/x-license: 7.13.0
@mui/x-tree-view: 7.13.0 => 7.13.0
@types/react: ^18.2.0 => 18.2.7
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.3.5 => 4.6.4

Search keywords: Total row
Order ID: 96815

[michelengelen]

Hey @gavbrennan ... do you have some custom styling in place? From the screenshot you shared we cannot really see anything.

The demos in the docs also do not show the described behavior, so my guess is that there have to be some styles applied that make it float.

A reproduction case would be ideal!

[gavbrennan]

I've narrowed it down to setting scrollbar-width in css - when its set to narrow, the horizontal scroll bar shrinks but the total row does not move with it. Unfortunately, I can't see to get scrollbar-width to do anything in codesandbox, I can change the scrollbar-color property fine but the width will not change.

[michelengelen]

@romgrk could you have a look? Thanks!

[romgrk]

Do you have a reproducible snippet I could copy/paste and debug, if codesandbox doesn't work? Please share it via CSB even if the problem isn't reproducible there: https://codesandbox.io/p/sandbox/thnslc

[gavbrennan]

Try this - the idea is make the object small enough that its forced to scroll, then set the scroll bar to be type 'thin'. Might not work on mac os (even in chrome) without all the equivalent webkit css: https://codesandbox.io/s/flamboyant-goldstine-fx2hwz

[michelengelen]

as already suspected by @gavbrennan it is working for me (on mac) ... 🤷🏼

[gavbrennan]

Is it actually working though, with the scroll bars shrinking to "thin" form and the grid correctly resizing, or do you mean the mac is just ignoring the change in size of the scroll bars?

[michelengelen]

ah, the scrollbars are not changing size because we render custom ones. And yes ... if I change the size to scrollbarSize prop 5 the aggregation row is indeed floating above the footer, but the scrollbars are not changing in size.

Screen.Recording.2024-09-04.at.16.06.21.mov

This seems like a regression ... it is working in v6: DEMO

[gavbrennan]

Agreed, as per the title of this report, this has only been an issue since moving to v7.x