remove remark

src/components/DefaulModal.tsx

@@ -1,4 +1,5 @@
 import { FC, Fragment, ReactNode, useEffect } from 'react'
+import { clx } from '../helpers/utils'
 import HeaderModal from './HeaderModal'
 
 interface Props {
@@ -8,6 +9,8 @@ interface Props {
     isHeader?: boolean,
     title_header?: string,
     width?: number
+    /** Raise above popovers (z-80) when confirm opens from nested panels */
+    elevated?: boolean
 }
 
 const DefaulModal: FC<Props> = (props: Props) => {
@@ -26,7 +29,14 @@ const DefaulModal: FC<Props> = (props: Props) => {
             {
                 props.open && (
                     <Fragment>
-                        <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-hidden fixed inset-0 z-[60] h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
+                        <div
+                            style={{ maxWidth: props.width }}
+                            onPointerDown={(e) => e.stopPropagation()}
+                            className={clx(
+                                'xl:justify-center xl:items-center items-end flex overflow-hidden fixed inset-0 h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto',
+                                props.elevated ? 'z-[100]' : 'z-[60]',
+                            )}
+                        >
                             <div className='relative max-h-[85vh] bottom-0 left-0 flex xl:items-center items-end w-full xl:my-6 xl:p-2'>
                                 <div className='border-0 max-h-[85vh] p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full modalGlass2 outline-none focus:outline-none'>
 
@@ -46,7 +56,14 @@ const DefaulModal: FC<Props> = (props: Props) => {
                             </div>
                         </div>
 
-                        <div onClick={props.close} className='fixed size-full top-0 bottom-0 right-0 modalGlass inset-0 z-50 '></div>
+                        <div
+                            onClick={props.close}
+                            onPointerDown={(e) => e.stopPropagation()}
+                            className={clx(
+                                'fixed size-full top-0 bottom-0 right-0 modalGlass inset-0',
+                                props.elevated ? 'z-[90]' : 'z-50',
+                            )}
+                        />
                     </Fragment>
                 )
             }

src/components/ModalConfrim.tsx

@@ -1,7 +1,8 @@
 import { FC, useState } from 'react'
-import DefaulModal from './DefaulModal'
+import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import Button from './Button'
+import DefaulModal from './DefaulModal'
 import Textarea from './Textarea'
 
 type Props = {
@@ -18,12 +19,13 @@ const ModalConfrim: FC<Props> = (props: Props) => {
     const { t } = useTranslation('global')
     const [description, setDescription] = useState<string>('')
 
-    return (
+    return createPortal(
         <DefaulModal
             open={props.isOpen}
             close={props.close}
             title_header={t('confrim.subject')}
             isHeader
+            elevated
         >
             <div className='mt-6'>
                 <div className='text-sm text-center'>
@@ -60,7 +62,8 @@ const ModalConfrim: FC<Props> = (props: Props) => {
                     />
                 </div>
             </div>
-        </DefaulModal>
+        </DefaulModal>,
+        document.body,
     )
 }