MenuItemLink is not clipped under AppBar when scrolling on large screen media

[smeng9]

What you were expecting:

I expect MenuItem of SideBar is always below AppBar on large screen media

What happened instead:

MenuItem of SideBar is above AppBar on large screen media

Steps to reproduce:

Here is the codesandbox environment https://codesandbox.io/s/patient-night-gfe2k
Set the view to about 1000 x 700 resolution, then try to scroll a little bit on the view, before the AppBar hides itself. You will see the buttons' z-index of the SideBar menu is above the AppBar, and covers the toggle button.

Related code:

MaterialUI defines AppBar's z-index to be 1100 and Drawer's z-index to be 1200. Maybe that is the reason Drawer's items' z-index is above AppBar's z-index, as they get inherited.

Other information:

Environment

• React-admin version: 3.1.2
• Last version that did not exhibit the issue (if applicable): 2.9.9
• React version: 16.12.0
• Browser: Firefox 71
• Stack trace (in case of a JS error): None for a CSS/Styling issue

[fzaninotto]

Could you please attacha a screenshot of the problem?

[fzaninotto]

I've reproduced it. Marking it as a bug. Thanks for the report.

[fzaninotto]

There is something weird: I cannot reproduce it locally. there must be something special about your Layout customization.

[fzaninotto]

OK, this bug is due to a regression in 'material-ui/core' between 4.3.3 and 4.8.0

[fzaninotto]

The regression was introduced by mui/material-ui#18866: we were able to replace Drawer CSS in the past, not we can only merge into them.