[pickers] Fix time picker scrollbar width

[oliviertassinari]

This one feels like a quick win, so going after it.

You can compare the scrollbar width with:

Help with #9311

On the solution space, Ant Design uses a similar solution, but it's different:

they also use scrollbar-width: thin but also:

1. leave more width. It feels great because when we look at [pickers] 5. Time section scroll bar gets in front of section column #9311 (comment), it looks like someone who added a large zoom. So It feels like fixing [pickers] 5. Time section scroll bar gets in front of section column #9311 should also involve a change in this direction. One could argue that to full fix this, we need to have a custom scrollbar handling logic, like one we have on Base UI scroll area component or Material UI tabs component, but I don't know, this feel overkill, the pragmatic approach feels like to try those quick wins, and see if it's good enough. Adding more JS logic will slow the component, so could be a net worse overall.

2. change the background color to white. Because of point 1 of [scroll area] Style hover + active state base-ui#1283 it makes using the scrollbar harder, but it creates more contrast, it's easier to see the scroll position.
   One could argue that, now, the scrollbar is too small, but honestly, it feels like that scrollbar is not meant to be used: it's more about indicating where the scroll is. If I'm a power user, I don't care, I use my mouse scroll wheel or my trackpad. If I'm a web user noob, I use the keyboard, input field, arrow. So what Ant Design did here isn't stupid, I would default to be lazy, not do changes, unless we feel it's a clear net win.

Preview: https://deploy-preview-16774--material-ui-x.netlify.app/x/react-date-pickers/time-picker/

[mui-bot]

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

Generated by 🚫 dangerJS against dee2310