diff --git a/web-chat/src/MessageInput.tsx b/web-chat/src/MessageInput.tsx
index fda34fc022..e8ba597ef4 100644
--- a/web-chat/src/MessageInput.tsx
+++ b/web-chat/src/MessageInput.tsx
@@ -30,15 +30,13 @@ export default function MessageInput(props: Props) {
   };
 
   return (
-    <Grid container spacing={2} direction="row" alignItems="center">
+    <Grid container direction="row" alignItems="center">
       <Grid item xs={11}>
         <TextField
           variant="outlined"
           label="Send a message"
           value={inputText}
-          fullWidth
-          style={{ margin: 8 }}
-          margin="normal"
+          fullWidth={true}
           InputLabelProps={{
             shrink: true,
           }}
diff --git a/web-chat/src/Room.tsx b/web-chat/src/Room.tsx
index 4b8f105010..79d8d75133 100644
--- a/web-chat/src/Room.tsx
+++ b/web-chat/src/Room.tsx
@@ -19,12 +19,15 @@ export default function Room(props: Props) {
   return (
     <div
       className="chat-container"
-      style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}
+      style={{ height: '98vh', display: 'flex', flexDirection: 'column' }}
     >
-      <div className="chat-list" style={{ flexGrow: 1, overflow: 'scroll' }}>
+      <div
+        className="chat-list"
+        style={{ display: 'flex', flexGrow: 1, overflowY: 'scroll' }}
+      >
         <ChatList messages={props.lines} />
       </div>
-      <div className="chat-input" style={{ flexGrow: 0, height: '120px' }}>
+      <div className="chat-input" style={{ display: 'flex', padding: 20 }}>
         <MessageInput
           messageHandler={setMessageToSend}
           sendMessage={