Search bar has incorrect zIndex when scrolling horizontally

[smeng9]

What you were expecting:
When scroll horizontally, the search bar should not be covered by MenuItemLink

What happened instead:
The search bar is covered

Steps to reproduce:

Related code:

https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple

We need to shrink the window size a little bit to reproduce

Other information:

Besides search bar, I would also wish that the menu will not be covered by the table view when scrolling horizontally.
What I mean could be to move the horizontal scroll bar to inside the table instead of in the bottom of the page

Environment

• React-admin version: 3.18.1
• Last version that did not exhibit the issue (if applicable): 3.16 (This issue is probably related with setting sidebar to fixed)
• React version: 17.0.2
• Browser: Edge 91
• Stack trace (in case of a JS error):

[djhi]

Reproduced, thanks for the report!

[andrico1234]

For a userland fix we've done something like this in the drawerPaper class object

  drawerPaper: {
    '& > [class^="RaSidebar"]': {
      background: "white",
      zIndex: 1000,
      borderRight: `1px solid ${theme.palette.grey[300]}`,  // not necessary but improves layout visuals
    },
  },

[djhi]

So you chose to put the sidebar at the front instead of the content? Would you mind showing a screenshot?

[andrico1234]

Yup! here's a screen:

sidebar-scroll.mov

The exact styles are:

    drawerPaper: {
        '& > div': {
            background: 'white',
            zIndex: 1000,
            borderRight: `1px solid ${theme.palette.grey[300]}`, // not necessary but improves layout visuals
        },
    },

I swapped out the attribute selector with the > div because MUI was hashing the RaSidebar class on build.

[GemsGame]

@djhi hello, any solution for this in official release?