chat input now always sits at the bottom of the chat; has a divider

src/chat/Chat.tsx

@@ -1,4 +1,4 @@
-import { Box, CircularProgress } from "@mui/material";
+import { Box, CircularProgress, Divider, Theme } from "@mui/material";
 import { useGlobalState, useNoteAPI } from "providers";
 import React from "react";
 import { useEffect } from "react";
@@ -7,6 +7,18 @@ import ChatInput from "./ChatInput";
 import ChatOutput from "./ChatOutput";
 import { Note } from "models";
 import { pond } from "protobuf-ts/pond";
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
+    chatContainer: {
+      height: "100%", 
+      display: "flex", 
+      flexDirection: "column", 
+      justifyContent: "space-between",
+    }
+  })
+})
 
 interface Props {
   objectKey: string;
@@ -21,6 +33,7 @@ export default function Chat(props: Props) {
   const [loading, setLoading] = useState<boolean>(false);
   const [totalMessages, setTotalMessages] = useState(0);
   const [{ user }] = useGlobalState();
+  const classes = useStyles()
 
   const loadChats = () => {
     setLoading(true)
@@ -79,8 +92,7 @@ export default function Chat(props: Props) {
           <CircularProgress />
         </Box>
       ) : (
-        <div style={{ maxHeight: "100%", display: "flex", flexDirection: "column-reverse" }}>
-          <ChatInput newNoteMethod={showNewNotes} objectKey={objectKey} type={type} />
+        <Box className={classes.chatContainer}>
           <ChatOutput
             totalMessages={totalMessages}
             // attachmentMap={attachmentMap}
@@ -88,7 +100,11 @@ export default function Chat(props: Props) {
             removeNoteMethod={removeNote}
             loadMore={loadMore}
           />
-        </div>
+          <Box style={{bottom: 0}}>
+            <Divider/>
+            <ChatInput newNoteMethod={showNewNotes} objectKey={objectKey} type={type} />
+          </Box>
+        </Box>
       )}
     </React.Fragment>
   );