fix: modal z-index cleanup (#5234)

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'>