From f89a4b688fbb4f2412973114b932ec5fd3f669ec Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Mon, 10 Jun 2019 16:29:20 +0100
Subject: [PATCH] Align message context menu vertically

This aligns the message context menu on either the top or the bottom of the
button that triggers, depending on which side has more space available to fit
the menu.

Fixes https://github.com/vector-im/riot-web/issues/9624
---
 .../views/messages/MessageActionBar.js        | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index dc579afd4b..fc146d282d 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -69,10 +69,6 @@ export default class MessageActionBar extends React.PureComponent {
         const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
         const buttonRect = ev.target.getBoundingClientRect();
 
-        // The window X and Y offsets are to adjust position when zoomed in to page
-        const x = buttonRect.right + window.pageXOffset;
-        const y = buttonRect.bottom + window.pageYOffset;
-
         const { getTile, getReplyThread } = this.props;
         const tile = getTile && getTile();
         const replyThread = getReplyThread && getReplyThread();
@@ -82,12 +78,9 @@ export default class MessageActionBar extends React.PureComponent {
             e2eInfoCallback = () => this.onCryptoClicked();
         }
 
-        createMenu(MessageContextMenu, {
+        const menuOptions = {
             mxEvent: this.props.mxEvent,
             chevronFace: "none",
-            // Align the right edge of the menu to the right edge of the button
-            right: window.innerWidth - x,
-            top: y,
             permalinkCreator: this.props.permalinkCreator,
             eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined,
             collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined,
@@ -95,7 +88,23 @@ export default class MessageActionBar extends React.PureComponent {
             onFinished: () => {
                 this.onFocusChange(false);
             },
-        });
+        };
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const buttonRight = buttonRect.right + window.pageXOffset;
+        const buttonBottom = buttonRect.bottom + window.pageYOffset;
+        const buttonTop = buttonRect.top + window.pageYOffset;
+        // Align the right edge of the menu to the right edge of the button
+        menuOptions.right = window.innerWidth - buttonRight;
+        // Align the menu vertically on whichever side of the button has more
+        // space available.
+        if (buttonBottom < window.innerHeight / 2) {
+            menuOptions.top = buttonBottom;
+        } else {
+            menuOptions.bottom = window.innerHeight - buttonTop;
+        }
+
+        createMenu(MessageContextMenu, menuOptions);
 
         this.onFocusChange(true);
     }