fix: rewrite member style

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,
+    flex: '2 0 402px',
   };
 });
 
@@ -27,17 +33,15 @@ export const StyledMemberRoleContainer = styled('div')(() => {
   return {
     display: 'flex',
     alignItems: 'center',
-    width: '222px',
-    flex: 1,
+    flex: '1 0 222px',
   };
 });
 
 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,
   };
 });