fixed chat drawer mobile formatting

src/chat/Chat.tsx

@@ -92,14 +92,16 @@ export default function Chat(props: Props) {
         </Box>
       ) : (
         <Box className={classes.chatContainer}>
-          <ChatOutput
-            totalMessages={totalMessages}
-            messages={chats}
-            removeNoteMethod={removeNote}
-            loadMore={loadMore}
-          />
-          <Box style={{bottom: 0}}>
-            <Divider/>
+          <Box sx={{ flex: 1, overflowY: "hidden", minHeight: 0 }}>
+            <ChatOutput
+              totalMessages={totalMessages}
+              messages={chats}
+              removeNoteMethod={removeNote}
+              loadMore={loadMore}
+            />
+          </Box>
+          <Box style={{ flexShrink: 0 }}>
+            <Divider />
             <ChatInput newNoteMethod={showNewNotes} objectKey={objectKey} type={type} />
           </Box>
         </Box>

src/chat/ChatDrawer.tsx

@@ -23,8 +23,10 @@ const useStyles = makeStyles<Theme>((theme: Theme) => ({
   },
   chatDrawerMobile: {
     backgroundColor: theme.palette.background.default,
-    height: "auto",
+    height: "100vh",
     width: "100%",
+    display: "flex",          // add this
+    flexDirection: "column",  // add this
   },
   drawerHeader: {
     display: "flex",

src/chat/ChatOutput.tsx

@@ -72,6 +72,7 @@ export default function ChatOutput(props: Props) {
     <Box ref={containerRef} onScroll={onScroll} style={{
       overflowY: "scroll",
       overflowX: "hidden",
+      height:    "100%",
     }}>
       {props.messages.length < props.totalMessages && (
         <ListItemButton onClick={seeMore} sx={{ justifyContent: "center"}}>