fix: editor content being hidden under keyboard on mobile (#1410)

packages/web/src/javascripts/Hooks/useDisableBodyScrollOnMobile.tsx

@@ -0,0 +1,27 @@
+import { isMobileScreen } from '@/Utils'
+import { useEffect, useRef } from 'react'
+
+/**
+ * Used to disable scroll on document.body when opening popovers or preferences view
+ * on mobile so that user can only scroll within the popover or prefs view
+ */
+export const useDisableBodyScrollOnMobile = () => {
+  const styleElementRef = useRef<HTMLStyleElement | null>(null)
+
+  useEffect(() => {
+    const isMobile = isMobileScreen()
+
+    if (isMobile && !styleElementRef.current) {
+      const styleElement = document.createElement('style')
+      styleElement.textContent = 'body { overflow: hidden; }'
+      document.body.appendChild(styleElement)
+      styleElementRef.current = styleElement
+    }
+
+    return () => {
+      if (isMobile && styleElementRef.current) {
+        styleElementRef.current.remove()
+      }
+    }
+  }, [])
+}