Use flex to keep the input box at the bottom

web-chat/src/App.tsx

@@ -1,4 +1,3 @@
-import { Paper } from '@material-ui/core';
 import { multiaddr } from 'multiaddr';
 import PeerId from 'peer-id';
 import React, { useEffect, useState } from 'react';
@@ -155,18 +154,14 @@ export default function App() {
   };
 
   return (
-    <div className="App">
-      <div className="chat-room">
+    <div className="chat-app">
       <WakuContext.Provider value={{ waku: stateWaku }}>
-          <Paper>
         <Room
           nick={nick}
           lines={stateMessages}
           commandHandler={commandHandler}
         />
-          </Paper>
       </WakuContext.Provider>
     </div>
-    </div>
   );
 }

web-chat/src/Room.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid, List, ListItem, ListItemText } from '@material-ui/core';
+import { List, ListItem, ListItemText } from '@material-ui/core';
 import React, { useState } from 'react';
 import { ChatMessage } from 'waku-chat/chat_message';
 import { WakuMessage } from 'waku/waku_message';
@@ -38,24 +38,20 @@ export default function Room(props: Props) {
   };
 
   return (
-    <Grid container spacing={2}>
-      <Grid item xs={12}>
-        <Box
-          height={800}
-          maxHeight={800}
-          style={{ flex: 1, maxHeight: '100%', overflow: 'scroll' }}
+    <div
+      className="chat-container"
+      style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}
     >
+      <div className="chat-list" style={{ flexGrow: 1, overflow: 'scroll' }}>
         <Lines messages={props.lines} />
-        </Box>
-      </Grid>
-
-      <Grid item xs={12}>
+      </div>
+      <div className="chat-input" style={{ flexGrow: 0, height: '120px' }}>
         <MessageInput
           messageHandler={messageHandler}
           sendMessage={sendMessage}
         />
-      </Grid>
-    </Grid>
+      </div>
+    </div>
   );
 }