fix: modal z-index cleanup (#5234)

2 years ago · 9961cdd7c8
parent 2e842333b1
commit 9961cdd7c8
22 changed files with 5 additions and 24 deletions
--- a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
+++ b/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' />
--- a/web/app/components/app/configuration/config-prompt/conversation-histroy/edit-modal.tsx
+++ b/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'}
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/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'>
--- a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
+++ b/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 && (
--- a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
+++ b/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)
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/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={() => {}}
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/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={() => {}}
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/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={() => {}}
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/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'>
--- a/web/app/components/base/tag-management/index.tsx
+++ b/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)}
--- a/web/app/components/base/tag-management/tag-remove-modal.tsx
+++ b/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={() => {}}
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/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}
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/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={() => {}}
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/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}>
--- a/web/app/components/header/account-setting/account-page/index.tsx
+++ b/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 && (
--- a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
+++ b/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'>
--- a/web/app/components/header/account-setting/index.tsx
+++ b/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'>
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/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} />
--- a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
+++ b/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
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/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'>
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/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={() => {}}
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/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'>