refactor: hide challenge modal illustration when shrinked because of keyboard

packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx

@@ -22,6 +22,7 @@ import { classNames } from '@standardnotes/utils'
 import ModalOverlay from '../Modal/ModalOverlay'
 import Modal from '../Modal/Modal'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import { useAutoElementRect } from '@/Hooks/useElementRect'
 
 type Props = {
   application: WebApplication
@@ -214,6 +215,11 @@ const ChallengeModal: FunctionComponent<Props> = ({
   const isFullScreenBlocker = challenge.reason === ChallengeReason.ApplicationUnlock
   const isMobileOverlay = isMobileScreen && !isFullScreenBlocker
 
+  const [modalElement, setModalElement] = useState<HTMLDivElement | null>(null)
+  const modalElementRect = useAutoElementRect(modalElement, {
+    updateOnWindowResize: true,
+  })
+
   return (
     <ModalOverlay
       isOpen={true}
@@ -221,6 +227,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
       onDismiss={cancelChallenge}
       dangerouslyBypassFocusLock={bypassModalFocusLock}
       key={challenge.id}
+      ref={setModalElement}
     >
       <Modal
         title="Authenticate"
@@ -255,7 +262,12 @@ const ChallengeModal: FunctionComponent<Props> = ({
           </button>
         )}
         <div className="flex min-h-0 w-full flex-grow flex-col items-center overflow-auto p-8">
-          <ProtectedIllustration className="mb-4 h-30 w-30 flex-shrink-0" />
+          <ProtectedIllustration
+            className={classNames(
+              'mb-4 h-30 w-30 flex-shrink-0',
+              modalElementRect && modalElementRect.height < 500 ? 'hidden' : '',
+            )}
+          />
           <div className="mb-3 max-w-76 text-center text-lg font-bold">{challenge.heading}</div>
           {challenge.subheading && (
             <div className="break-word mb-4 max-w-76 text-center text-sm">{challenge.subheading}</div>

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