feat: improve layout for more dimensions

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 => {

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>