feat: improve shell and room display

src/Bootstrap.tsx

@@ -111,7 +111,7 @@ function Bootstrap({
           height: '100vh',
           display: 'flex',
           flexDirection: 'column',
-          paddingTop: 7,
+          paddingTop: 8,
         }}
       >
         <Snackbar
@@ -137,7 +137,7 @@ function Bootstrap({
               justifyContent: 'space-between',
             }}
           >
-            <Typography sx={{ fontWeight: 'bold' }}>{title}</Typography>
+            <Typography variant="h6">{title}</Typography>
             <Tooltip title="Number of peers in the room">
               <StepIcon icon={numberOfPeers} sx={{ marginLeft: 'auto' }} />
             </Tooltip>

src/components/Room/Room.tsx

@@ -147,13 +147,22 @@ export function Room({
   })
 
   return (
-    <Box className="h-full p-4 flex flex-col">
+    <Box
+      className="Room"
+      sx={{
+        height: '100%',
+        padding: 2,
+        paddingTop: 0,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
       <ChatTranscript
         messageLog={messageLog}
         userId={userId}
         className="grow overflow-auto"
       />
-      <form onSubmit={handleMessageSubmit} className="mt-8">
+      <form onSubmit={handleMessageSubmit} className="mt-2">
         <Stack direction="row" spacing={2}>
           <FormControl fullWidth>
             <TextField