[material-ui][Table] Scrollbar extends into header when using stickyHeader on Table component

[ffanizzanvisia]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Have an implementation of a Table using the stickyHeader prop, and sufficient rows to make a scrollbar appear (ex: https://mui.com/material-ui/react-table/#sticky-header)
2. Note that the scrollbar extends into the header:

Current behavior 😯

The scrollbar extends into the header

Expected behavior 🤔

The scrollbar should stop at the top edge of the top row of the table

Context 🔦

Have a UX that is consistent for end users

Your environment 🌎

npx @mui/envinfo

``` System: OS: Windows 10 10.0.22000 Binaries: Node: 16.14.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.18 - C:\Program Files\nodejs\yarn.CMD npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.42) npmPackages: @emotion/react: ^11.7.1 => 11.8.2 @emotion/styled: ^11.6.0 => 11.8.1 @mui/base: 5.0.0-alpha.72 @mui/icons-material: ^5.8.4 => 5.8.4 @mui/lab: ^5.0.0-alpha.69 => 5.0.0-alpha.73 @mui/material: ^5.2.5 => 5.5.1 @mui/private-theming: 5.4.4 @mui/styled-engine: 5.4.4 @mui/system: 5.5.1 @mui/types: 7.1.4 @mui/utils: 5.4.4 @mui/x-data-grid: 5.6.1 @mui/x-data-grid-pro: ^5.5.1 => 5.6.1 @mui/x-license-pro: 5.6.1 @types/react: ^17.0.24 => 17.0.40 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ~4.4.3 => 4.4.4 ```

I tested this in Chrome and Firefox with the same results

[ZeeshanTamboli]

Tagging @danilo-leal and @zanivan since it is a UI/UX decision-related issue. Also, there was a recent duplicate issue: #40770.

[zanivan]

Even though there's a technical reason behind why the scroll bar shows up over the sticky header, it doesn't really make sense for it to be like that from a UX standpoint. The scroll bar should only pop up in parts that actually scroll. Having it everywhere can confuse users, making them think they can scroll where they can't.

Tagging @siriwatknp since you're this component's owner.

[tinoue]

Is there any workaround for this issue ?

[ewarrenG]

+1

[zanivan]

@DiegoAndai should we include this for v6?

[DiegoAndai]

@zanivan I don't think this would need braking changes, so I wouldn't "pin it" to v6. I'll add the ready to take label to see if we get any interested contributors.

For anyone interested in taking this, we should investigate the cause and propose a solution. Feel free to open a PR and add me as a reviewer. The expected outcome is that the scroll bar should only pop up in parts that actually scroll.

[umarmunirpl]

Are there any updates on this?

[DiegoAndai]

Hey @umarmunirpl, thanks for reaching out. I have no updates, but the issue is ready to take in case you wish to work on it. I would be happy to guide you.