fix: members page z-index bug (#768)

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

@@ -144,7 +144,7 @@ export default function AccountSetting({
           </div>
         </div>
         <div ref={scrollRef} className='relative w-[520px] h-[580px] pb-4 overflow-y-auto'>
-          <div className={cn('sticky top-0 px-6 py-4 flex items-center justify-between h-14 mb-4 bg-white text-base font-medium text-gray-900', scrolled && scrolledClassName)}>
+          <div className={cn('sticky top-0 px-6 py-4 flex items-center justify-between h-14 mb-4 bg-white text-base font-medium text-gray-900 z-20', scrolled && scrolledClassName)}>
             {[...menuItems[0].items, ...menuItems[1].items].find(item => item.key === activeMenu)?.name}
             <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
           </div>

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

@@ -3,12 +3,12 @@ import { useTranslation } from 'react-i18next'
 import { Fragment } from 'react'
 import { useContext } from 'use-context-selector'
 import { Menu, Transition } from '@headlessui/react'
+import cn from 'classnames'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
+import s from './index.module.css'
 import type { Member } from '@/models/common'
 import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
 import { ToastContext } from '@/app/components/base/toast'
-import s from './index.module.css'
-import cn from 'classnames'
-import { ChevronDownIcon, CheckIcon } from '@heroicons/react/24/outline'
 
 const itemClassName = `
   flex px-3 py-2 cursor-pointer hover:bg-gray-50 rounded-lg
@@ -23,14 +23,14 @@ const itemDescClassName = `
   leading-[18px] text-xs text-gray-500 whitespace-nowrap
 `
 
-interface IOperationProps {
+type IOperationProps = {
   member: Member
   onOperate: () => void
 }
 
 const Operation = ({
   member,
-  onOperate
+  onOperate,
 }: IOperationProps) => {
   const { t } = useTranslation()
   const RoleMap = {
@@ -44,92 +44,94 @@ const Operation = ({
       await deleteMemberOrCancelInvitation({ url: `/workspaces/current/members/${member.id}` })
       onOperate()
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
-    } catch (e) {
-      
+    }
+    catch (e) {
+
     }
   }
   const handleUpdateMemberRole = async (role: string) => {
     try {
-      await updateMemberRole({ 
+      await updateMemberRole({
         url: `/workspaces/current/members/${member.id}/update-role`,
-        body: { role }
+        body: { role },
       })
       onOperate()
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
-    } catch (e) {
-      
+    }
+    catch (e) {
+
     }
   }
 
   return (
-      <Menu as="div" className="relative w-full h-full">
-        {
-          ({ open }) => (
-            <>
-              <Menu.Button className={cn(
-                `
-                  group flex items-center justify-between w-full h-full justify-center 
+    <Menu as="div" className="relative w-full h-full">
+      {
+        ({ open }) => (
+          <>
+            <Menu.Button className={cn(
+              `
+                  group flex items-center justify-between w-full h-full
                   hover:bg-gray-100 cursor-pointer ${open && 'bg-gray-100'}
                   text-[13px] text-gray-700 px-3
-                `
-              )}>
-                {RoleMap[member.role] || RoleMap.normal}
-                <ChevronDownIcon className={`w-4 h-4 group-hover:block ${open ? 'block' : 'hidden'}`} />
-              </Menu.Button>
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-100"
-                enterFrom="transform opacity-0 scale-95"
-                enterTo="transform opacity-100 scale-100"
-                leave="transition ease-in duration-75"
-                leaveFrom="transform opacity-100 scale-100"
-                leaveTo="transform opacity-0 scale-95"
-              >
-                <Menu.Items
-                  className={cn(
-                    `
+                `,
+            )}>
+              {RoleMap[member.role] || RoleMap.normal}
+              <ChevronDownIcon className={`w-4 h-4 group-hover:block ${open ? 'block' : 'hidden'}`} />
+            </Menu.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Menu.Items
+                className={cn(
+                  `
                       absolute right-0 top-[52px] z-10 bg-white border-[0.5px] border-gray-200
                       divide-y divide-gray-100 origin-top-right rounded-lg
                     `,
-                    s.popup
-                  )}
-                >
-                  <div className="px-1 py-1">
-                    {
-                      ['admin', 'normal'].map(role => (
-                        <Menu.Item>
-                          <div className={itemClassName} onClick={() => handleUpdateMemberRole(role)}>
-                            {
-                              role === member.role
-                                ? <CheckIcon className={itemIconClassName} />
-                                : <div className={itemIconClassName} />
-                            }
-                            <div>
-                              <div className={itemTitleClassName}>{t(`common.members.${role}`)}</div>
-                              <div className={itemDescClassName}>{t(`common.members.${role}Tip`)}</div>
-                            </div>
+                  s.popup,
+                )}
+              >
+                <div className="px-1 py-1">
+                  {
+                    ['admin', 'normal'].map(role => (
+                      <Menu.Item>
+                        <div className={itemClassName} onClick={() => handleUpdateMemberRole(role)}>
+                          {
+                            role === member.role
+                              ? <CheckIcon className={itemIconClassName} />
+                              : <div className={itemIconClassName} />
+                          }
+                          <div>
+                            <div className={itemTitleClassName}>{t(`common.members.${role}`)}</div>
+                            <div className={itemDescClassName}>{t(`common.members.${role}Tip`)}</div>
                           </div>
-                        </Menu.Item>
-                      ))
-                    }
-                  </div>
-                  <Menu.Item>
-                    <div className='px-1 py-1'>
-                      <div className={itemClassName} onClick={handleDeleteMemberOrCancelInvitation}>
-                        <div className={itemIconClassName} />
-                        <div>
-                          <div className={itemTitleClassName}>{t('common.members.removeFromTeam')}</div>
-                          <div className={itemDescClassName}>{t('common.members.removeFromTeamTip')}</div>
                         </div>
+                      </Menu.Item>
+                    ))
+                  }
+                </div>
+                <Menu.Item>
+                  <div className='px-1 py-1'>
+                    <div className={itemClassName} onClick={handleDeleteMemberOrCancelInvitation}>
+                      <div className={itemIconClassName} />
+                      <div>
+                        <div className={itemTitleClassName}>{t('common.members.removeFromTeam')}</div>
+                        <div className={itemDescClassName}>{t('common.members.removeFromTeamTip')}</div>
                       </div>
                     </div>
-                  </Menu.Item>
-                </Menu.Items>
-              </Transition>
-            </>
-          )
-        }
-      </Menu>
+                  </div>
+                </Menu.Item>
+              </Menu.Items>
+            </Transition>
+          </>
+        )
+      }
+    </Menu>
   )
 }