ScrollablePane with DetailsList and Sticky Header is overpainting scrollbar

[obiwan007]

Bug Report

• Package version(s): 5.60.0
• Browser and OS versions: Chrome

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? No

Requested priority: (Normal)

Products/sites affected: (if applicable)
Demo App for ScrollablePane

Describe the issue:

The Header is shown correctly on first draw - even if it is a bit overpainted from the scrollbar (making the header slightly narrower would be great).
If the scrollbar is used, the Sticky header is repainting itself. As it is as wide as the container it is overwriting the scrollbar at the top.

Actual behavior:

Scrollbar is overwritten from sticky header in DetailsList after scroll has taken place.

Expected behavior:

Scrollbar is visible completely in all cases.
Header is completely visible even if scrollbar is shown.

If applicable, please provide a codepen repro:

See fabric component demo in ScrollablePaneDetailsListExample.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Fabric React!

[obiwan007]

Unfortunately this issue is still not fixed.

[aditima]

@leddie24 - you are already working on something very similar. Maybe this will be taken care of by your new fix?

[leddie24]

This is fixed from #4491