Custom scrollbars in the admin frame

[sophschneider]

Should we keep using native scrollbars for the admin frame?

Current the scrollbar thumb is cut off in the admin because of the frame's rounded corners. To fix this, we would have to reposition the scrollbar track by adding some margins, something like:

&::-webkit-scrollbar {
      width: 7px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      margin-top: 6px;
      margin-right: 4px;
      margin-bottom: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #888;
      border-radius: 10px;
    }

But this means using a webkit custom scrollbar implementation. This can be problematic because

• it is not well supported and not standard, doesn't work on firefox
• does not respect user's scrollbar OS settings (scrollbars set to always or when scrolling)
• doesn't come with future native scrollbar updates that browsers release
• cannot be used in combination with scrollbar-color and scrollbar-width properties

If we do implement our own webkit scrollbars we would have to tophat the following cases

Browser	With scrollbar always	With scrollbar while scrolling
Chrome	-	-
Firefox *Can't use webkit, maybe conditionally add scrollbar-color styles?	-	-
Safari	-	-
Edge	-	-

We should also make sure to transition/animate hover states and scrolling states, and also make sure that the styles are sharable to other scroll containers in the admin (maybe implement this within Scrollable?)