added chat drawer

src/app/App.css

@@ -22,4 +22,17 @@ html, body, #root {
   height: 100%;
   margin: 0;
   padding: 0;
+}
+
+/* styles.css or a CSS module */
+.MuiDialog-root {
+  z-index: 1500 !important;
+}
+
+.MuiDrawer-root {
+  z-index: 1300 !important;
+}
+
+.MuiMenu-root { 
+  z-index: 1400 !important; /* Ensure it's above the drawer */ 
 }

src/app/HeaderButtons.tsx

@@ -2,6 +2,7 @@ import { Chat as ChatIcon, ChevronRight } from "@mui/icons-material";
 import { Box, Drawer, IconButton, Theme, Tooltip, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import Chat from "chat/Chat";
+import { ChatDrawer } from "chat/ChatDrawer";
 import { useMobile } from "hooks";
 import { Team, User } from "models";
 import moment from "moment";
@@ -36,7 +37,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(1),
     height: "100%",
     minWidth: theme.spacing(54),
-    maxWidth: theme.spacing(54)
+    maxWidth: theme.spacing(54),
+    zIndex: 1000000000000
   },
   chatDrawerMobile: {
     padding: theme.spacing(1),
@@ -119,22 +121,29 @@ export default function HeaderButtons(props: Props) {
     <>
     {chatButton()}
     {team && team.settings && team.settings.key && (
-      <Drawer
-        anchor="right"
-        open={chatDrawerOpen}
+      <ChatDrawer 
+        open={chatDrawerOpen} 
         onClose={() => setChatDrawerOpen(false)}
-        style={{ height: "100%", maxWidth: "100%" }}
-        title={team.settings.name ? team.settings.name + "Chat" : "Chat"}>
-        <div className={isMobile ? classes.chatDrawerMobile : classes.chatDrawer}>
-          <div className={classes.drawerHeader}>
-            <IconButton onClick={() => setChatDrawerOpen(false)}>
-              <ChevronRight />
-            </IconButton>
-            <Typography>{team.name()} Chat</Typography>
-          </div>
-          <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
-        </div>
-      </Drawer>
+        team={team}
+      />
+      // <Drawer
+      //   anchor="right"
+      //   open={chatDrawerOpen}
+      //   sx={{ zIndex: 10000 }}
+      //   onClose={() => setChatDrawerOpen(false)}
+      //   style={{ height: "100%", maxWidth: "100%" }}
+      //   title={team.settings.name ? team.settings.name + "Chat" : "Chat"}>
+      
+      //   <div className={isMobile ? classes.chatDrawerMobile : classes.chatDrawer}>
+      //     <div className={classes.drawerHeader}>
+      //       <IconButton onClick={() => setChatDrawerOpen(false)}>
+      //         <ChevronRight />
+      //       </IconButton>
+      //       <Typography>{team.name()} Chat</Typography>
+      //     </div>
+      //     <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
+      //   </div>
+      // </Drawer>
     )}
     </>
   )