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,8 +65,10 @@ export function ChatDrawer(props: Props) {
           </IconButton>
           <Typography>{team.name()} Chat</Typography>
         </Box>
+        <Box className={classes.chatContainer}>
           <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
         </Box>
+      </Box>
     </Drawer>
   )
 }

src/chat/ChatMessage.tsx

@@ -242,8 +242,8 @@ export default function ChatMessage(props: Props) {
               </Typography>
             </Grid>
           </Grid>
-          <Grid>
+          <Grid size={{ xs: 12 }}>
-            <Typography variant="body2">
+            <Typography variant="body2" whiteSpace={"pre-line"}>
               {props.note.content()}
             </Typography>
             {/*load files and display attached images below the message */}

src/chat/ChatOutput.tsx

@@ -68,11 +68,11 @@ export default function ChatOutput(props: Props) {
   return (
     <Box
       //height="85%"
-      height="auto"
+      // height="auto"
       style={{
         overflowY: "scroll",
         overflowX: "hidden",
-        borderRadius: "4px"
+        // borderRadius: "4px"
       }}>
       {props.messages.length < props.totalMessages && (
         <div style={{ textAlign: "center" }}>

src/pages/Team.tsx

@@ -1,6 +1,7 @@
-import { Avatar, AvatarGroup, Box, Button, Grid2, Theme, Typography } from "@mui/material";
+import { Avatar, AvatarGroup, Box, Button, Card, Grid2, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import LoadingScreen from "app/LoadingScreen";
+import Chat from "chat/Chat";
 import { useMobile } from "hooks";
 import { cloneDeep } from "lodash";
 import { Team, teamScope, User } from "models";
@@ -28,6 +29,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     textTransform: "capitalize",
     color: getSignatureAccentColour(),
   },
+  card: {
+    height: theme.spacing(72)
+  },
   container: { 
     display: 'flex', 
     justifyContent: "space-between",
@@ -207,6 +211,18 @@ export default function TeamPage() {
         closeDialogCallback={() => setUserDialog(false)} 
         refreshCallback={() => {}} 
       />
+      <Grid2 container spacing={1}>
+        <Grid2 size={{ xs: 12, sm: 6 }}>
+          <Card className={classes.card}>
+            <Chat objectKey={team.key()} />
+          </Card>
+        </Grid2>
+        <Grid2 size={{ xs: 12, sm: 6 }}>
+          <Card className={classes.card}>
+
+          </Card>
+        </Grid2>
+      </Grid2>
     </PageContainer>
   );
 }