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

[ffanizzanvisia]

Duplicates

• I have searched the existing issues

Latest version

• 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.