fix scrolling issues on firefox

src/components/common/Modal.js

@@ -15,7 +15,15 @@ export const Modal = ({
       document.body.style.overflow = "hidden"
     }
 
-    return () => (document.body.style.overflow = "overlay")
+    return () => {
+      // https://codepedia.info/detect-browser-in-javascript
+      let userAgent = navigator.userAgent
+      if (userAgent.match(/firefox|fxios/i)) {
+        document.body.style.overflow = "auto"
+      } else {
+        document.body.style.overflow = "overlay"
+      }
+    }
   }, [show])
 
   if (!show) return null

src/index.css

@@ -15,9 +15,15 @@ body,
   line-height: 125%;
 }
 
+* {
+  /* Firefox scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.5) rgba(243, 244, 246, 1);
+}
+
 body {
-  overflow: overlay;
   overflow-x: hidden;
+  overflow: overlay;
 }
 
 body::-webkit-scrollbar {
@@ -30,6 +36,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 .scroller {
+  overflow-y: auto;
   overflow-y: overlay;
 }