fix: modal z-index cleanup (#5234)

web/app/components/app/annotation/batch-add-annotation-modal/index.tsx

@@ -87,7 +87,7 @@ const BatchModal: FC<IBatchModalProps> = ({
   }
 
   return (
-    <Modal isShow={isShow} onClose={() => { }} wrapperClassName='!z-[20]' className='px-8 py-6 !max-w-[520px] !rounded-xl'>
+    <Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
       <div className='relative pb-1 text-xl font-medium leading-[30px] text-gray-900'>{t('appAnnotation.batchModal.title')}</div>
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}>
         <XClose className='w-4 h-4 text-gray-500' />

web/app/components/app/configuration/config-prompt/conversation-histroy/edit-modal.tsx

@@ -27,7 +27,6 @@ const EditModal: FC<Props> = ({
       title={t('appDebug.feature.conversationHistory.editModal.title')}
       isShow={isShow}
       onClose={onClose}
-      wrapperClassName='!z-[101]'
     >
       <div className={'mt-6 font-medium text-sm leading-[21px] text-gray-900'}>{t('appDebug.feature.conversationHistory.editModal.userPrefix')}</div>
       <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-gray-100'}

web/app/components/app/configuration/config-var/config-modal/index.tsx

@@ -132,7 +132,6 @@ const ConfigModal: FC<IConfigModalProps> = ({
       title={t(`appDebug.variableConig.${isCreate ? 'addModalTitle' : 'editModalTitle'}`)}
       isShow={isShow}
       onClose={onClose}
-      wrapperClassName='!z-[100]'
     >
       <div className='mb-8'>
         <div className='space-y-2'>

web/app/components/app/configuration/dataset-config/select-dataset/index.tsx

@@ -94,7 +94,6 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
       isShow={isShow}
       onClose={onClose}
       className='w-[400px]'
-      wrapperClassName='!z-[101]'
       title={t('appDebug.feature.dataSet.selectTitle')}
     >
       {!loaded && (

web/app/components/app/configuration/tools/external-data-tool-modal.tsx

@@ -186,7 +186,6 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
     <Modal
       isShow
       onClose={() => { }}
-      wrapperClassName='z-[101]'
       className='!p-8 !pb-6 !max-w-none !w-[640px]'
     >
       <div className='mb-2 text-xl font-semibold text-gray-900'>
@@ -287,7 +286,6 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
       {
         showEmojiPicker && (
           <EmojiPicker
-            className='!z-[200]'
             onSelect={(icon, icon_background) => {
               handleValueChange({ icon, icon_background })
               setShowEmojiPicker(false)

web/app/components/app/create-app-modal/index.tsx

@@ -83,7 +83,6 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
   return (
     <Modal
       overflowVisible
-      wrapperClassName='z-20'
       className='!p-0 !max-w-[720px] !w-[720px] rounded-xl'
       isShow={show}
       onClose={() => {}}

web/app/components/app/create-from-dsl-modal/index.tsx

@@ -78,7 +78,6 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose }: CreateFromDSLModalProp
 
   return (
     <Modal
-      wrapperClassName='z-20'
       className='px-8 py-6 max-w-[520px] w-[520px] rounded-xl'
       isShow={show}
       onClose={() => {}}

web/app/components/app/switch-app-modal/index.tsx

@@ -87,7 +87,6 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
   return (
     <>
       <Modal
-        wrapperClassName='z-20'
         className={cn('p-8 max-w-[600px] w-[600px]', s.bg)}
         isShow={show}
         onClose={() => {}}

web/app/components/base/emoji-picker/index.tsx

@@ -86,7 +86,7 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
     onClose={() => { }}
     isShow
     closable={false}
-    wrapperClassName={`!z-50 ${className}`}
+    wrapperClassName={className}
     className={cn(s.container, '!w-[362px] !p-0')}
   >
     <div className='flex flex-col items-center w-full p-3'>

web/app/components/base/tag-management/index.tsx

@@ -60,7 +60,6 @@ const TagManagementModal = ({ show, type }: TagManagementModalProps) => {
 
   return (
     <Modal
-      wrapperClassName='!z-[1020]'
       className='px-8 py-6 !max-w-[600px] !w-[600px] rounded-xl'
       isShow={show}
       onClose={() => setShowTagManagementModal(false)}

web/app/components/base/tag-management/tag-remove-modal.tsx

@@ -21,7 +21,6 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
 
   return (
     <Modal
-      wrapperClassName='!z-[1020]'
       className={cn('p-8 max-w-[480px] w-[480px]', s.bg)}
       isShow={show}
       onClose={() => {}}

web/app/components/datasets/hit-testing/index.tsx

@@ -195,7 +195,6 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
       </FloatRightContainer>
       <Modal
         className='!max-w-[960px] !p-0'
-        wrapperClassName='!z-40'
         closable
         onClose={() => setCurrParagraph({ showModal: false })}
         isShow={currParagraph.showModal}

web/app/components/datasets/rename-modal/index.tsx

@@ -56,7 +56,6 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
 
   return (
     <Modal
-      wrapperClassName='z-20'
       className='px-8 py-6 max-w-[520px] w-[520px] rounded-xl'
       isShow={show}
       onClose={() => {}}

web/app/components/explore/create-app-modal/index.tsx

@@ -64,7 +64,6 @@ const CreateAppModal = ({
       <Modal
         isShow={show}
         onClose={() => {}}
-        wrapperClassName='z-40'
         className='relative !max-w-[480px] px-8'
       >
         <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onHide}>

web/app/components/header/account-setting/account-page/index.tsx

@@ -168,7 +168,6 @@ export default function AccountPage() {
           isShow
           onClose={() => setEditNameModalVisible(false)}
           className={s.modal}
-          wrapperClassName='z-20'
         >
           <div className='mb-6 text-lg font-medium text-gray-900'>{t('common.account.editName')}</div>
           <div className={titleClassName}>{t('common.account.name')}</div>
@@ -198,7 +197,6 @@ export default function AccountPage() {
             resetPasswordForm()
           }}
           className={s.modal}
-          wrapperClassName='z-20'
         >
           <div className='mb-6 text-lg font-medium text-gray-900'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
           {userProfile.is_password_set && (

web/app/components/header/account-setting/api-based-extension-page/modal.tsx

@@ -75,7 +75,6 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
     <Modal
       isShow
       onClose={() => { }}
-      wrapperClassName='!z-[103]'
       className='!p-8 !pb-6 !max-w-none !w-[640px]'
     >
       <div className='mb-2 text-xl font-semibold text-gray-900'>

web/app/components/header/account-setting/index.tsx

@@ -157,7 +157,7 @@ export default function AccountSetting({
       isShow
       onClose={() => { }}
       className={s.modal}
-      wrapperClassName='!z-20 pt-[60px]'
+      wrapperClassName='pt-[60px]'
     >
       <div className='flex'>
         <div className='w-[44px] sm:w-[200px] px-[1px] py-4 sm:p-4 border border-gray-100 shrink-0 sm:shrink-1 flex flex-col items-center sm:items-start'>

web/app/components/header/account-setting/members-page/invite-modal/index.tsx

@@ -70,7 +70,7 @@ const InviteModal = ({
 
   return (
     <div className={cn(s.wrap)}>
-      <Modal overflowVisible isShow onClose={() => {}} className={cn(s.modal)} wrapperClassName='z-20'>
+      <Modal overflowVisible isShow onClose={() => {}} className={cn(s.modal)}>
         <div className='flex justify-between mb-2'>
           <div className='text-xl font-semibold text-gray-900'>{t('common.members.inviteTeamMember')}</div>
           <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />

web/app/components/header/account-setting/members-page/invited-modal/index.tsx

@@ -28,7 +28,7 @@ const InvitedModal = ({
 
   return (
     <div className={s.wrap}>
-      <Modal isShow onClose={() => {}} className={s.modal} wrapperClassName='z-20'>
+      <Modal isShow onClose={() => {}} className={s.modal}>
         <div className='flex justify-between mb-3'>
           <div className='
             w-12 h-12 flex items-center justify-center rounded-xl

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx

@@ -107,7 +107,6 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
     <Modal
       isShow={Boolean(model) && open}
       onClose={onClose}
-      wrapperClassName='!z-30'
       className='max-w-none pt-8 px-8 w-[640px]'
       title={
         <div className='pb-3 font-semibold'>

web/app/components/tools/workflow-tool/confirm-modal/index.tsx

@@ -19,7 +19,6 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
 
   return (
     <Modal
-      wrapperClassName='!z-[1020]'
       className={cn('p-8 max-w-[600px] w-[600px]', s.bg)}
       isShow={show}
       onClose={() => {}}

web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx

@@ -132,7 +132,6 @@ const AddExtractParameter: FC<Props> = ({
           isShow
           onClose={hideModal}
           className='!w-[400px] !max-w-[400px] !p-4'
-          wrapperClassName='!z-[100]'
         >
           <div>
             <div className='space-y-2'>