src/app/globals.css

@@ -6,4 +6,5 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  overflow-x: hidden;
 }

src/components/chat/GlobalChatbox.tsx

@@ -155,19 +155,21 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
   return (
     <Drawer
       anchor="right"
-      variant="persistent"
+      variant="temporary"
       open={open}
       onClose={onClose}
       hideBackdrop
+      disableScrollLock
+      disableEnforceFocus
       sx={{ zIndex: (muiTheme) => muiTheme.zIndex.modal + 100 }}
       PaperProps={{
         sx: {
           width: { xs: "100%", sm: width },
           background: "transparent",
           boxShadow: "none",
-          overflow: "visible",
+          overflow: open ? "visible" : "hidden",
           zIndex: (muiTheme) => muiTheme.zIndex.modal + 100,
-          transition: isResizing ? "none" : "width 0.2s cubic-bezier(0, 0, 0.2, 1)",
+          transition: isResizing ? "none" : undefined,
         },
       }}
     >