Improve right panel scroll bar

[AllanOricil]

You may disregard these recommendations if you used the Edit on GitHub button from dvc.org to improve a doc in place.

❗ Please read the guidelines in the Contributing to the Documentation list if you make any substantial changes to the documentation or JS engine.

🐛 Please make sure to mention Fix #issue (if applicable) in the description of the PR. This causes GitHub to close it automatically when the PR is merged.

Please choose to allow us to edit your branch when creating the PR.

Thank you for the contribution - we'll try to review it as soon as possible. 🙏

Fix #1333

Hi @shcheklein ,

I finished to do the improvements you asked for this #1333
I basically copied the GMail CSS for the shadow boxes like you commented.
I spent around 8h to finish it. Around 1.5h fixing dependency issues with with Mac M1 (more specifically libvips which is used by sharp and used by Gatsby) and problems with my node version. I was using node 12 and Sharp was not working on my Mac M1, so I switched to Node 15 and everything worked. Then I used around 4h to learn the basics about React hooks and 2.5h to actually create and execute a plan to fix the issues.

Follow below pictures to show the result. I hope it is exactly what you asked.
Can you tell me which branch you want me to open the PR against?

When the scroolbar appears and it is at the top, a shadow box appears at the bottom

When the scrollbar appears and it is anywhere in between, both shadow boxes appear in the top and bottom

When the scrollbar appears and it is at the bottom/end of the div, a shadow box appears at the top

When the scrollbar is not present, the shadow boxes are not added

All the changes above are also working on Firefox 89.0 and Safari 14.1.1.

I also made the "Selected Menu Item" to be visible all the time. I noticed the current code was attempting to do that, but it was not working, so I did a small change to fix it. Now whenever you scroll to a section the Menu Item will follow you along, even when there are scrollbars.

React is not my thing but I think I did a good job. Now lets see what you think. Thanks.

[AllanOricil]

@shcheklein the commit check error does not make sense.

According to the offical specification of scrollIntoview behavior can receive 'instant' as its value.

https://developer.mozilla.org/pt-BR/docs/Web/API/Element/scrollIntoView

[AllanOricil]

It is failling on lint stuff. When I run locally this error is not accused. When I ran prettier it formats differently than what is expecting. I dont really know how to fix it because it was suppose to be the same as we are using the same rules.