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 element-hq/element-web#9624

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,20 +78,33 @@ 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,
             e2eInfoCallback: e2eInfoCallback,
             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);
     }