[data grid] improve scrollbar deadzone with overlay scrollbars

[lauri865]

• I have followed (at least) the PR section of the contributing guide.

On OS X and potentially other platforms that hide scrollbars when not scrolling, virtual scrollbars are effectively overlapping. When scrollbar is scrolled to the end, there's a dead zone where you cannot drag the scroll handle at all until you manually scroll it out of the dead zone, and scrolling works in only in one direction (whichever comes last in the DOM, currently horizontal scrollbar).

This PR adds two improvements:

1. Vertical scrollbar comes after horizontal scrollbar, making it render on top. It's more likely that there's more vertical content than horizontal content, hence the handle is smaller and the issue is more pronounced (it's more likely that the whole scroll handle is hidden in the dead zone).
2. On hovering scroll track, the zIndex is incremented by +1, making the deadzone go away. You still cannot scroll from the deadzone itself in one of the directions (previously vertically, now horizontally), but the it's at least an easy win for now, and if you start hovering/scrolling outside of the dead zone, it works in both directions now.

[lauri865]

The issue:
https://github.com/user-attachments/assets/ca67bd65-99e2-4e56-89cc-58e787cbf165

[mui-bot]

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

Generated by 🚫 dangerJS against 4288597