feat: simplify and improve UI layout

src/components/ChatTranscript/ChatTranscript.tsx

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

src/components/Room/Room.tsx

@@ -5,6 +5,7 @@ import FormControl from '@mui/material/FormControl'
 import Stack from '@mui/material/Stack'
 import TextField from '@mui/material/TextField'
 import Fab from '@mui/material/Fab'
+import Divider from '@mui/material/Divider'
 import ArrowUpward from '@mui/icons-material/ArrowUpward'
 
 import { ShellContext } from 'ShellContext'
@@ -164,9 +165,10 @@ export function Room({
       <ChatTranscript
         messageLog={messageLog}
         userId={userId}
-        className="grow overflow-auto"
+        className="grow overflow-auto px-4"
       />
-      <form onSubmit={handleMessageSubmit} className="mt-2">
+      <Divider />
+      <form onSubmit={handleMessageSubmit} className="p-4">
         <Stack direction="row" spacing={2}>
           <FormControl fullWidth>
             <TextField

src/components/Shell/Shell.tsx

@@ -53,9 +53,6 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
 const Main = styled('main', { shouldForwardProp: prop => prop !== 'open' })<{
   open?: boolean
 }>(({ theme, open }) => ({
-  flexGrow: 1,
-  padding: theme.spacing(3),
-  paddingTop: 0,
   transition: theme.transitions.create('margin', {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen,
@@ -296,14 +293,10 @@ export const Shell = ({ children, userPeerId }: ShellProps) => {
             sx={{
               display: 'flex',
               flexDirection: 'column',
-              flexGrow: 'unset',
-              height: '100%',
               width: '100%',
-              maxHeight: '100%',
-              overflow: 'auto',
             }}
           >
-            <DrawerHeader sx={{ flexGrow: 1 }}></DrawerHeader>
+            <DrawerHeader />
             <Box sx={{ overflow: 'auto', flexGrow: 1 }}>{children}</Box>
           </Main>
         </Box>

src/pages/Home/Home.tsx

@@ -29,7 +29,7 @@ export function Home() {
   }
 
   return (
-    <Box className="Home">
+    <Box className="Home px-4">
       <header className="max-w-3xl text-center mx-auto mt-8">
         <Typography variant="body1">
           This is a communication tool that is free, open source, and designed