feat: improve layout for more dimensions

This commit is contained in:
Jeremy Kahn 2022-09-04 12:09:30 -05:00
parent a2ac9fa102
commit 56230b8361
2 changed files with 17 additions and 5 deletions

View File

@ -46,7 +46,6 @@ export const ChatTranscript = ({
sx={theme => ({ sx={theme => ({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
paddingTop: theme.spacing(1),
})} })}
> >
{messageLog.map(message => { {messageLog.map(message => {

View File

@ -173,11 +173,10 @@ export const Shell = ({ children, userPeerId }: ShellProps) => {
<CssBaseline /> <CssBaseline />
<Box <Box
className="Chitchatter" className="Chitchatter"
sx={theme => ({ sx={{
height: '100vh', height: '100vh',
display: 'flex', display: 'flex',
paddingTop: theme.spacing(7), }}
})}
> >
<Snackbar <Snackbar
open={isAlertShowing} open={isAlertShowing}
@ -292,7 +291,21 @@ export const Shell = ({ children, userPeerId }: ShellProps) => {
</List> </List>
<Divider /> <Divider />
</Drawer> </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> </Box>
</ThemeProvider> </ThemeProvider>
</ShellContext.Provider> </ShellContext.Provider>