chore(styles): use standard styles for scrollbar (#461)

- Uses only standard css for scrollbar.
- This change allows us to use the Fluent
`useScrollbarWidth` hook if needed.

Author: boilund

styles/src/static/static.styles.ts

@@ -2,24 +2,9 @@ import { makeStaticStyles, tokens } from "@fluentui/react-components";
 
 const scrollbarColor = tokens.colorScrollbarOverlay;
 
-const isFirefox = window.navigator.userAgent.includes("Fire");
 export const useScrollStaticStyles = makeStaticStyles({
   "*": {
-    // Firefox
-    // Scrollbar styling is amazingly complex. Read more here:
-    // https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox
-    scrollbarWidth: isFirefox ? "thin" : "unset",
-    scrollbarColor: isFirefox ? `${scrollbarColor} transparent` : "auto",
-  },
-  "*::-webkit-scrollbar": {
-    width: tokens.spacingHorizontalSNudge,
-    height: tokens.spacingHorizontalSNudge,
-  },
-  "*::-webkit-scrollbar-thumb": {
-    background: scrollbarColor,
-    borderRadius: tokens.borderRadiusXLarge,
-  },
-  "*::-webkit-scrollbar-track": {
-    background: "none",
+    scrollbarWidth: "thin",
+    scrollbarColor: `${scrollbarColor} transparent`,
   },
 });