FIX: ensures message actions are bounded (#21027)

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)}}

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(
+      const messageContainer = chatMessageContainer(
-        chatMessageContainer(this.message.id, this.context),
+        this.message.id,
-        element,
+        this.context
-        {
-          placement: "top-end",
-          strategy: "fixed",
-          modifiers: [
-            { name: "hide", enabled: true },
-            { name: "eventListeners", options: { scroll: false } },
-            {
-              name: "offset",
-              options: { offset: [-2, MSG_ACTIONS_VERTICAL_PADDING] },
-            },
-          ],
-        }
       );
+
+      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] },
+          },
+        ],
+      });
     });
   }
 

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)}}