From 3176d4cb5ae5038e8a63d0d744cf02728dfa132b Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 7 Apr 2023 20:54:41 +0200
Subject: [PATCH] FIX: ensures message actions are bounded (#21027)

---
 .../discourse/components/chat-live-pane.hbs   |  2 +-
 .../chat-message-actions-desktop.js           | 39 ++++++++++++-------
 .../discourse/components/chat-thread.hbs      |  5 ++-
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs
index 0ad94728c19..b00f0efc748 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs
@@ -24,7 +24,7 @@
   <ChatMentionWarnings />
 
   <div
-    class="chat-messages-scroll chat-messages-container"
+    class="chat-messages-scroll chat-messages-container popper-viewport"
     {{on "scroll" this.computeScrollState passive=true}}
     {{chat/on-scroll this.resetIdle (hash delay=500)}}
     {{chat/on-scroll this.computeArrow (hash delay=150)}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js
index 93f4da32cb9..5cf220165a9 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js
@@ -40,22 +40,31 @@ export default class ChatMessageActionsDesktop extends Component {
     this.popper?.destroy();
 
     schedule("afterRender", () => {
-      this.popper = createPopper(
-        chatMessageContainer(this.message.id, this.context),
-        element,
-        {
-          placement: "top-end",
-          strategy: "fixed",
-          modifiers: [
-            { name: "hide", enabled: true },
-            { name: "eventListeners", options: { scroll: false } },
-            {
-              name: "offset",
-              options: { offset: [-2, MSG_ACTIONS_VERTICAL_PADDING] },
-            },
-          ],
-        }
+      const messageContainer = chatMessageContainer(
+        this.message.id,
+        this.context
       );
+
+      this.popper = createPopper(messageContainer, element, {
+        placement: "top-end",
+        strategy: "fixed",
+        modifiers: [
+          {
+            name: "flip",
+            enabled: true,
+            options: {
+              boundary: messageContainer.closest(".popper-viewport"),
+              fallbackPlacements: ["bottom-end"],
+            },
+          },
+          { name: "hide", enabled: true },
+          { name: "eventListeners", options: { scroll: false } },
+          {
+            name: "offset",
+            options: { offset: [-2, MSG_ACTIONS_VERTICAL_PADDING] },
+          },
+        ],
+      });
     });
   }
 
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-thread.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-thread.hbs
index a2e29d499ad..61e6df014c3 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-thread.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-thread.hbs
@@ -15,7 +15,10 @@
     </LinkTo>
   </div>
 
-  <div class="chat-thread__body" {{did-insert this.setScrollable}}>
+  <div
+    class="chat-thread__body popper-viewport"
+    {{did-insert this.setScrollable}}
+  >
     <div
       class="chat-thread__messages chat-messages-container"
       {{chat/on-resize this.didResizePane (hash delay=10)}}