updated chat styling; text input now always visible

src/chat/ChatDrawer.tsx

@@ -9,14 +9,24 @@ import Chat from "./Chat";
 const useStyles = makeStyles((theme: Theme) => {
   return ({
     chatDrawer: {
+      display: "flex",
+      flexDirection: "column", // Arrange children vertically
       backgroundColor: theme.palette.background.default,
       // padding: theme.spacing(1),
       height: "100%",
+      maxHeight: "100%",
+      minHeight: "100%",
       minWidth: theme.spacing(54),
       maxWidth: theme.spacing(54),
+      // border: "1px solid red",
       // zIndex: 1000000000000,
       // zIndex: theme.zIndex.drawer,
     },
+    chatContainer: {
+      // border: "1px solid green",
+      flex: 1, // Make it take up the remaining space
+      overflow: "hidden", // Ensure content is scrollable if it overflows
+    },
     chatDrawerMobile: {
       backgroundColor: theme.palette.background.default,
       // padding: theme.spacing(1),
@@ -24,6 +34,7 @@ const useStyles = makeStyles((theme: Theme) => {
       width: "100%"
     },
     drawerHeader: {
+      // border: "1px solid blue",
       display: "flex",
       alignItems: "center",
       padding: theme.spacing(1),
@@ -46,7 +57,7 @@ export function ChatDrawer(props: Props) {
   const classes = useStyles()
 
   return (
-    <Drawer open={open} onClose={onClose} anchor="right" sx={{ zIndex: 10000 }}>
+    <Drawer open={open} onClose={onClose} anchor="right" >
       <Box className={isMobile ? classes.chatDrawerMobile : classes.chatDrawer}>
         <Box className={classes.drawerHeader}>
           <IconButton onClick={onClose}>
@@ -54,7 +65,9 @@ export function ChatDrawer(props: Props) {
           </IconButton>
           <Typography>{team.name()} Chat</Typography>
         </Box>
-        <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
+        <Box className={classes.chatContainer}>
+          <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
+        </Box>
       </Box>
     </Drawer>
   )