fix: rewrite member style

packages/app/src/components/workspace-setting/member/MembersPage.tsx

@@ -12,6 +12,7 @@ import {
   StyledMoreVerticalButton,
   StyledPublishExplanation,
   StyledMemberWarp,
+  StyledMemberContainer,
 } from './style';
 import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons';
 import { useState } from 'react';
@@ -31,14 +32,14 @@ import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [isInviteModalShow, setIsInviteModalShow] = useState(false);
   const { members, removeMember, loaded } = useMembers();
+
   const { t } = useTranslation();
-  // FIXME: DELETE THIS
   const { enableWorkspace } = useWorkspaceHelper();
   const { confirm } = useConfirm();
 
   if (workspace.provider === 'affine') {
     return (
-      <>
+      <StyledMemberContainer>
         <StyledMemberListContainer>
           {!loaded && (
             <Wrapper justifyContent="center">
@@ -57,6 +58,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                 <StyledMemberRoleContainer>
                   {t('Access level')}
                 </StyledMemberRoleContainer>
+                <div style={{ width: '24px', paddingRight: '48px' }}></div>
               </StyledMemberTitleContainer>
               {members.map((member, index) => {
                 const user = Object.assign(
@@ -153,7 +155,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             open={isInviteModalShow}
           ></InviteMemberModal>
         </StyledMemberButtonContainer>
-      </>
+      </StyledMemberContainer>
     );
   }
 

packages/app/src/components/workspace-setting/member/style.ts

@@ -1,14 +1,21 @@
 import { styled } from '@/styles';
 import MuiAvatar from '@mui/material/Avatar';
 
-export const StyledMemberTitleContainer = styled('div')(() => {
+export const StyledMemberTitleContainer = styled('li')(() => {
   return {
     display: 'flex',
-    marginTop: '60px',
     fontWeight: '500',
+    marginBottom: '32px',
     flex: 1,
   };
 });
+export const StyledMemberContainer = styled('div')(() => {
+  return {
+    display: 'flex',
+    height: '100%',
+    flexDirection: 'column',
+  };
+});
 
 export const StyledMemberAvatar = styled(MuiAvatar)(() => {
   return { height: '40px', width: '40px' };
@@ -18,8 +25,7 @@ export const StyledMemberNameContainer = styled('div')(() => {
   return {
     display: 'flex',
     alignItems: 'center',
-    width: '402px',
+    flex: '2 0 402px',
-    flex: 2,
   };
 });
 
@@ -27,17 +33,15 @@ export const StyledMemberRoleContainer = styled('div')(() => {
   return {
     display: 'flex',
     alignItems: 'center',
-    width: '222px',
+    flex: '1 0 222px',
-    flex: 1,
   };
 });
 
 export const StyledMemberListContainer = styled('ul')(() => {
   return {
-    marginTop: '15px',
     overflowY: 'scroll',
     width: '100%',
-    maxHeight: 'calc(100vh - 300px)',
+    flex: 1,
   };
 });
 
@@ -60,7 +64,7 @@ export const StyledMemberName = styled('div')(({ theme }) => {
   return {
     fontWeight: '400',
     fontSize: '18px',
-    lineHeight: '16px',
+    lineHeight: '26px',
     color: theme.colors.textColor,
   };
 });