diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js
index 000a68ff37b..02c17893812 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js
@@ -24,6 +24,7 @@ export default class ChatDrawer extends Component {
   rafTimer = null;
   hasUnreadMessages = false;
   drawerStyle = null;
+  drawerContainer = document.querySelector(".chat-drawer-outlet-container");
 
   didInsertElement() {
     super.didInsertElement(...arguments);
@@ -32,6 +33,9 @@ export default class ChatDrawer extends Component {
       return;
     }
 
+    this.drawerContainer?.addEventListener("click", this.handleDrawerClick);
+    document.addEventListener("click", this.handleOutsideClick);
+
     this._checkSize();
     this.appEvents.on("chat:open-url", this, "openURL");
     this.appEvents.on("chat:toggle-close", this, "close");
@@ -56,6 +60,11 @@ export default class ChatDrawer extends Component {
     if (!this.chat.userCanChat) {
       return;
     }
+    document
+      .querySelector(".chat-drawer-outlet-container")
+      ?.removeEventListener("click", this.handleDrawerClick);
+
+    document.removeEventListener("click", this.handleOutsideClick);
 
     window.removeEventListener("resize", this._checkSize);
 
@@ -218,6 +227,22 @@ export default class ChatDrawer extends Component {
     this.chat.activeChannel = null;
   }
 
+  @action
+  handleDrawerClick() {
+    if (this.drawerContainer) {
+      // this.drawerContainer.style.setProperty("z-index", "1000"); //TODO needs to be calc(var("composer", "dropdown") + 1)
+      this.drawerContainer.classList.add("--active");
+    }
+  }
+
+  @action
+  handleOutsideClick(event) {
+    if (this.drawerContainer && !this.drawerContainer.contains(event.target)) {
+      // this.drawerContainer.style.setProperty("z-index", "400");
+      this.drawerContainer.classList.remove("--active");
+    }
+  }
+
   @action
   didResize(element, { width, height }) {
     this.chatDrawerSize.size = { width, height };
diff --git a/plugins/chat/assets/stylesheets/common/chat-drawer.scss b/plugins/chat/assets/stylesheets/common/chat-drawer.scss
index 1ecd84c9a31..738c6dd7534 100644
--- a/plugins/chat/assets/stylesheets/common/chat-drawer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-drawer.scss
@@ -27,8 +27,13 @@ html.rtl {
 .chat-drawer-outlet-container {
   // higher than timeline, lower than composer, dropdown, and user card
   z-index: z("chat-drawer");
+
+  &:focus-within,
+  &.--active {
+    z-index: calc(z("composer", "dropdown") + 1);
+  }
   position: fixed;
-  right: var(--composer-right, 20px);
+  right: 0.75rem;
   left: 0;
   max-height: calc(100% - var(--header-offset) - 15px);
   margin: 0;
@@ -38,12 +43,12 @@ html.rtl {
   pointer-events: none !important;
   bottom: 0;
   box-sizing: border-box;
-  padding-bottom: var(--composer-height, 0);
+  padding-bottom: 0; // var(--composer-height, 0);
   transition: all 100ms ease-in;
   transition-property: bottom, padding-bottom;
 
   .rtl & {
-    left: var(--composer-right, 20px);
+    left: 0.75rem;
     right: 0;
   }
 }