[DataGrid] Update vertical scrollbar position to cover pinned rows

[KenanYusuf]

Continuation of #16379

Fixes #13286

Browser	Before	After
Chrome, macOS
Edge, Windows 11
Chrome, Windows 11

[mui-bot]

Deploy preview: https://deploy-preview-16476--material-ui-x.netlify.app/

Bundle size report

Total Size Change:^{${\tiny{\color{green}▼}}$}-6.31KB^(-0.05%) - Total Gzip Change:^{${\tiny{\color{green}▼}}$}-1.46KB^(-0.04%)
Files: 118 total (0 added, 0 removed, 19 changed)

@mui/x-data-grid-premium parsed:^{${\tiny{\color{green}▼}}$}-1.06KB^(-0.19%) gzip:^{${\tiny{\color{green}▼}}$}-248B^(-0.15%)
@mui/x-data-grid-pro parsed:^{${\tiny{\color{green}▼}}$}-1.06KB^(-0.23%) gzip:^{${\tiny{\color{green}▼}}$}-238B^(-0.18%)
@mui/x-data-grid-premium/DataGridPremium parsed:^{${\tiny{\color{green}▼}}$}-1.06KB^(-0.20%) gzip:^{${\tiny{\color{green}▼}}$}-267B^(-0.18%)
@mui/x-data-grid-pro/DataGridPro parsed:^{${\tiny{\color{green}▼}}$}-1.06KB^(-0.24%) gzip:^{${\tiny{\color{green}▼}}$}-226B^(-0.18%)
@mui/x-data-grid parsed:^{${\tiny{\color{green}▼}}$}-1.04KB^(-0.27%) gzip:^{${\tiny{\color{green}▼}}$}-239B^(-0.22%)
@mui/x-data-grid/DataGrid parsed:^{${\tiny{\color{green}▼}}$}-1.04KB^(-0.29%) gzip:^{${\tiny{\color{green}▼}}$}-236B^(-0.22%)

Show 13 more bundle changes

@mui/x-charts-pro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)
@mui/x-charts-pro/BarChartPro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-2B^(0.00%)
@mui/x-charts-pro/ChartContainerPro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-1B^(0.00%)
@mui/x-charts-pro/ChartDataProviderPro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)
@mui/x-charts-pro/FunnelChart parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)
@mui/x-charts-pro/ScatterChartPro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-1B^(0.00%)
@mui/x-date-pickers-pro/DateRangeCalendar parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-2B^(-0.01%)
@mui/x-date-pickers-pro/DateRangePicker parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)
@mui/x-date-pickers-pro/DateRangePickerDay parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(+0.01%)
@mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-1B^(0.00%)
@mui/x-date-pickers-pro/MobileDateRangePicker parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)
@mui/x-tree-view-pro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-1B^(0.00%)
@mui/x-tree-view-pro/RichTreeViewPro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against de7bfb5

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[KenanYusuf]

This corner piece covers up the dead zone between the two scrollbars.

Without	With

[KenanYusuf]

This is the easiest way to ensure the horizontal scrollbar is the correct width and the vertical and corner scrollbar are hidden. Also removes the need for fillers in the skeleton loader rows.

[romgrk]

Tbh I love the design as it is. I feel like it makes the grid with pinned rows a bit more readable as to which is the pinned vs unpinned section. I wonder if we could use the current styling for a grid with pinned rows, and the new styling for the case when there's no pinned rows?

[KenanYusuf]

I feel like it makes the grid with pinned rows a bit more readable as to which is the pinned vs unpinned section

@romgrk it does, but I think scroll shadows are a better indicator — I plan to add this back in at the same time #10001