fix: modal z-index cleanup (#5234)

This commit is contained in:
Charles Zhou 2024-06-15 08:09:19 -05:00 committed by GitHub
parent 2e842333b1
commit 9961cdd7c8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
22 changed files with 5 additions and 24 deletions

View File

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

View File

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

View File

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

View File

@ -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 && (

View File

@ -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)

View File

@ -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={() => {}}

View File

@ -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={() => {}}

View File

@ -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={() => {}}

View File

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

View File

@ -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)}

View File

@ -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={() => {}}

View File

@ -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}

View File

@ -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={() => {}}

View File

@ -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}>

View File

@ -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 && (

View File

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

View File

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

View File

@ -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} />

View File

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

View File

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

View File

@ -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={() => {}}

View File

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