refactor: hide challenge modal illustration when shrinked because of keyboard

packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx

@@ -1,6 +1,7 @@
+import { mergeRefs } from '@/Hooks/mergeRefs'
 import { DialogOverlay, DialogOverlayProps } from '@reach/dialog'
 import { classNames } from '@standardnotes/snjs'
-import { ReactNode } from 'react'
+import { ForwardedRef, forwardRef, ReactNode } from 'react'
 import { useModalAnimation } from '../Modal/useModalAnimation'
 
 type Props = {
@@ -10,23 +11,25 @@ type Props = {
   className?: string
 } & DialogOverlayProps
 
-const ModalOverlay = ({ isOpen, onDismiss, children, className, ...props }: Props) => {
-  const [isMounted, setElement] = useModalAnimation(isOpen)
+const ModalOverlay = forwardRef(
+  ({ isOpen, onDismiss, children, className, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
+    const [isMounted, setElement] = useModalAnimation(isOpen)
 
-  if (!isMounted) {
-    return null
-  }
+    if (!isMounted) {
+      return null
+    }
 
-  return (
-    <DialogOverlay
-      className={classNames('p-0 md:px-0 md:opacity-100', className)}
-      onDismiss={onDismiss}
-      ref={setElement}
-      {...props}
-    >
-      {children}
-    </DialogOverlay>
-  )
-}
+    return (
+      <DialogOverlay
+        className={classNames('p-0 md:px-0 md:opacity-100', className)}
+        onDismiss={onDismiss}
+        ref={mergeRefs([setElement, ref])}
+        {...props}
+      >
+        {children}
+      </DialogOverlay>
+    )
+  },
+)
 
 export default ModalOverlay