Fix: Desktop Scrollbar appears on some mobile browsers (#541)

App.tsx

@@ -60,7 +60,7 @@ import { DonationNagModal } from './components/donation-nag-modal';
 import { createWebNavigator } from './components/navigation/web-navigator';
 import { isMobile } from './util/util';
 import { Logo16 } from './components/logo';
-import './global.css';
+import { useScrollbarStyle } from './components/navigation/scroll-bar-hooks';
 
 
 // TODO: Onboarding works
@@ -464,6 +464,8 @@ const App = () => {
     })();
   }, [isLoading]);
 
+  useScrollbarStyle();
+
   if (serverStatus !== "ok") {
     return <UtilityScreen serverStatus={serverStatus}/>
   }

components/navigation/scroll-bar-hooks.tsx

@@ -135,6 +135,42 @@ const useScrollbar = (controller: string) => {
   }).current;
 };
 
+const useScrollbarStyle = () => {
+  const desktopScrollbarCSS = `
+  ::-webkit-scrollbar {
+    width: 14px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #ddd;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #70f;
+    border-radius: 99px;
+  }
+
+  @-moz-document url-prefix() {
+    * {
+      scrollbar-color: #70f #ddd;
+    }
+
+    *::-moz-scrollbar-thumb {
+      border-radius: 99px;
+    }
+  }
+  `;
+
+  useEffect(() => {
+    if (!isMobile()) {
+      const styleEl = document.createElement('style');
+      styleEl.textContent = desktopScrollbarCSS;
+      document.head.appendChild(styleEl);
+    }
+  }, []);
+};
+
 export {
   useScrollbar,
+  useScrollbarStyle,
 };

components/navigation/scroll-bar.tsx

@@ -19,7 +19,7 @@ type ScrollViewData = {
   controller: string | null;
 
   // A callback to call when the Scrollbar's thumb is dragged
-  onThumbDrag?: (offset: number) => void;
+  onThumbDrag?: null | ((offset: number) => void);
 
   // The height of the controlling Scrollview's content
   contentHeight?: number;