Fix members table mobile styles (#162)

app/src/components/projectSettings/MemberTable.tsx

@@ -46,24 +46,38 @@ const MemberTable = () => {
 
   return (
     <>
-      <Table>
+      <Table fontSize={{ base: "sm", md: "md" }}>
-        <Thead>
+        <Thead
+          sx={{
+            th: {
+              base: { px: 0 },
+              md: { px: 6 },
+            },
+          }}
+        >
           <Tr>
             <Th>Name</Th>
-            <Th>Email</Th>
+            <Th display={{ base: "none", md: "block" }}>Email</Th>
             <Th>Role</Th>
             {selectedProject?.role === "ADMIN" && <Th />}
           </Tr>
         </Thead>
-        <Tbody>
+        <Tbody
+          sx={{
+            td: {
+              base: { px: 0 },
+              md: { px: 6 },
+            },
+          }}
+        >
           {selectedProject?.projectUsers.map((member) => {
             return (
               <Tr key={member.id}>
                 <Td>
                   <Text fontWeight="bold">{member.user.name}</Text>
                 </Td>
-                <Td>{member.user.email}</Td>
+                <Td display={{ base: "none", md: "block" }}>{member.user.email}</Td>
-                <Td fontSize="sm">{member.role}</Td>
+                <Td fontSize={{ base: "xs", md: "sm" }}>{member.role}</Td>
                 {selectedProject.role === "ADMIN" && (
                   <Td textAlign="end">
                     {member.user.id !== session?.user?.id &&

app/src/pages/project/settings/index.tsx

@@ -60,7 +60,7 @@ export default function Settings() {
   return (
     <>
       <AppShell requireAuth>
-        <PageHeaderContainer>
+        <PageHeaderContainer px={4}>
           <Breadcrumb>
             <BreadcrumbItem>
               <ProjectBreadcrumbContents />
@@ -70,7 +70,7 @@ export default function Settings() {
             </BreadcrumbItem>
           </Breadcrumb>
         </PageHeaderContainer>
-        <VStack px={8} py={4} alignItems="flex-start" spacing={4}>
+        <VStack px={4} py={4} alignItems="flex-start" spacing={4}>
           <VStack spacing={0} alignItems="flex-start">
             <Text fontSize="2xl" fontWeight="bold">
               Project Settings

app/src/theme/ChakraThemeProvider.tsx

@@ -18,7 +18,7 @@ const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpe
 
 const modalTheme = defineMultiStyleConfig({
   baseStyle: definePartsStyle({
-    dialog: { borderRadius: "md" },
+    dialog: { borderRadius: "md", mx: 4 },
   }),
 });