From b9251ad93c7e1df679aa57565c1520c1a5416aad Mon Sep 17 00:00:00 2001
From: arcticfly <41524992+arcticfly@users.noreply.github.com>
Date: Wed, 16 Aug 2023 17:52:25 -0700
Subject: [PATCH] Fix members table mobile styles (#162)

---
 .../projectSettings/MemberTable.tsx           | 26 ++++++++++++++-----
 app/src/pages/project/settings/index.tsx      |  4 +--
 app/src/theme/ChakraThemeProvider.tsx         |  2 +-
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/src/components/projectSettings/MemberTable.tsx b/app/src/components/projectSettings/MemberTable.tsx
index 957d8c9..707e098 100644
--- a/app/src/components/projectSettings/MemberTable.tsx
+++ b/app/src/components/projectSettings/MemberTable.tsx
@@ -46,24 +46,38 @@ const MemberTable = () => {
 
   return (
     <>
-      <Table>
-        <Thead>
+      <Table fontSize={{ base: "sm", md: "md" }}>
+        <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 fontSize="sm">{member.role}</Td>
+                <Td display={{ base: "none", md: "block" }}>{member.user.email}</Td>
+                <Td fontSize={{ base: "xs", md: "sm" }}>{member.role}</Td>
                 {selectedProject.role === "ADMIN" && (
                   <Td textAlign="end">
                     {member.user.id !== session?.user?.id &&
diff --git a/app/src/pages/project/settings/index.tsx b/app/src/pages/project/settings/index.tsx
index e509cf5..42ebe0a 100644
--- a/app/src/pages/project/settings/index.tsx
+++ b/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
diff --git a/app/src/theme/ChakraThemeProvider.tsx b/app/src/theme/ChakraThemeProvider.tsx
index 5626da5..eeba5b5 100644
--- a/app/src/theme/ChakraThemeProvider.tsx
+++ b/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 },
   }),
 });