Navbar Overlapping Scrollbar on demo page

[Dnouv]

What you were expecting:
On clicking the user icon, the user menu should have been opened.

What happened instead:

After clicking the user icon, the top appbar overlapped the navbar and scrollbar.

Steps to reproduce:

1. Visit react admin demo site.
2. Turn on the dark theme.
3. Click on the user icon.

Other information:

Here is a screenshot of the error; the overlapping can be seen at the top right corner.

Environment

• Browser: Chrome

[djhi]

Indeed. Thanks or reporting

[Dnouv]

@djhi, @fzaninotto I think there is some misunderstanding here; my issue was related to the Appbar overlapping the navbar. The issue resolved here is the user icon's overlapping; the navbar issue is still not resolved. Please look into this issue once more. Thank you.

[fzaninotto]

@Dnouv Then I don't understand what your issue is. Could you elaborate?

[Dnouv]

Yeah, sure, I will try; when the user drop-down is opened, the app bar overlaps the scrollbar on the top right side, as indicated in the picture below.
Overlapping page screenshot:

Without overlapping of scrollbar:

Thank you!

[fzaninotto]

Thanks for the clarification. Indeed, we should use the disabledScrollLock modal attribute on the menu (cf https://material-ui.com/api/modal/#props). Reopening.

[Dnouv]

Thanks a lot, @fzaninotto.

[Dnouv]

@fzaninotto, the issue was resolved using disableScrollbarLock, but it caused another issue. Since the scrolling is not locked, the popover menu remains on the screen while scrolling down it could be seen in the screenshot below.

I have tried a solution for fixing this issue by varying the padding of the body using the onEntering function of Material-UI Popover API, as in the PR: https://github.com/navidrome/navidrome/pull/948

Please look into the issue once again. Thank you!

[fzaninotto]

The current material-ui popover doesn't give us a better choice - either we lock the scroll, and this causes scrollbars to disappear, or we don't lock it, and the menu isn't locked.

There is an open discussion in the material-ui tracker (mui/material-ui#18898) and I think that's where the problem should be fixed.

PS: I've tried setting position: absolute !important on the menu and causes other problems.

[Dnouv]

Thanks for looking into the issue. It seems we need to wait for it to fix on the Material-UI side.