From 56230b8361c5f2e70776f714bf5e3414b35e8ad9 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Sun, 4 Sep 2022 12:09:30 -0500
Subject: [PATCH] feat: improve layout for more dimensions

---
 .../ChatTranscript/ChatTranscript.tsx         |  1 -
 src/components/Shell/Shell.tsx                | 21 +++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/ChatTranscript/ChatTranscript.tsx b/src/components/ChatTranscript/ChatTranscript.tsx
index ea7be1b..188b52f 100644
--- a/src/components/ChatTranscript/ChatTranscript.tsx
+++ b/src/components/ChatTranscript/ChatTranscript.tsx
@@ -46,7 +46,6 @@ export const ChatTranscript = ({
       sx={theme => ({
         display: 'flex',
         flexDirection: 'column',
-        paddingTop: theme.spacing(1),
       })}
     >
       {messageLog.map(message => {
diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx
index 5355ba9..c94a6b8 100644
--- a/src/components/Shell/Shell.tsx
+++ b/src/components/Shell/Shell.tsx
@@ -173,11 +173,10 @@ export const Shell = ({ children, userPeerId }: ShellProps) => {
         <CssBaseline />
         <Box
           className="Chitchatter"
-          sx={theme => ({
+          sx={{
             height: '100vh',
             display: 'flex',
-            paddingTop: theme.spacing(7),
-          })}
+          }}
         >
           <Snackbar
             open={isAlertShowing}
@@ -292,7 +291,21 @@ export const Shell = ({ children, userPeerId }: ShellProps) => {
             </List>
             <Divider />
           </Drawer>
-          <Main open={isDrawerOpen}>{children}</Main>
+          <Main
+            open={isDrawerOpen}
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              flexGrow: 'unset',
+              height: '100%',
+              width: '100%',
+              maxHeight: '100%',
+              overflow: 'auto',
+            }}
+          >
+            <DrawerHeader sx={{ flexGrow: 1 }}></DrawerHeader>
+            <Box sx={{ overflow: 'auto', flexGrow: 1 }}>{children}</Box>
+          </Main>
         </Box>
       </ThemeProvider>
     </ShellContext.Provider>