prevent ShortcutsModal bouncing offset

lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react'
 import { useSetRecoilState } from 'recoil'
 import { shortcutsState } from '../../store/Atoms'
-import Modal from '../shared/Modal'
+import Modal, { ModalProps } from '../shared/Modal'
 
 interface Shortcut {
   children: ReactNode
@@ -19,7 +19,12 @@ function ShortCut(props: Shortcut) {
   )
 }
 
-export default function ShortcutsModal() {
+interface ShortcutsModalProps {
+  show: boolean
+}
+
+export default function ShortcutsModal(props: ShortcutsModalProps) {
+  const { show } = props
   const setShortcutState = useSetRecoilState(shortcutsState)
 
   const shortcutStateHandler = () => {
@@ -31,6 +36,7 @@ export default function ShortcutsModal() {
       onClose={shortcutStateHandler}
       title="Hotkeys"
       className="modal-shortcuts"
+      show={show}
     >
       <div className="shortcut-options">
         <ShortCut content="Enable multi-stroke mask drawing">

lama_cleaner/app/src/components/Workspace.tsx

@@ -13,7 +13,7 @@ const Workspace = ({ file }: WorkspaceProps) => {
   return (
     <>
       <Editor file={file} />
-      {shortcutVisbility ? <ShortcutsModal /> : null}
+      <ShortcutsModal show={shortcutVisbility} />
     </>
   )
 }

lama_cleaner/app/src/components/shared/Modal.tsx

@@ -3,7 +3,8 @@ import React, { ReactNode, useRef } from 'react'
 import { useClickAway, useKey } from 'react-use'
 import Button from './Button'
 
-interface ModalProps {
+export interface ModalProps {
+  show: boolean
   children?: ReactNode
   onClose?: () => void
   title: string
@@ -11,7 +12,7 @@ interface ModalProps {
 }
 
 export default function Modal(props: ModalProps) {
-  const { children, onClose, className, title } = props
+  const { show, children, onClose, className, title } = props
   const ref = useRef(null)
 
   useClickAway(ref, () => {
@@ -23,7 +24,10 @@ export default function Modal(props: ModalProps) {
   })
 
   return (
-    <div className="modal-mask">
+    <div
+      className="modal-mask"
+      style={{ visibility: show === true ? 'visible' : 'hidden' }}
+    >
       <div ref={ref} className={`modal ${className}`}>
         <div className="modal-header">
           <h3>{title}</h3>