From 0355c9179771b211af7146aa72ecb4f7f79477d8 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 10 Jun 2019 16:12:23 +0100 Subject: [PATCH] Align message context menu to right This changes the message context menu to align the right edge of the menu with the right edge of the button that opens it, which should keep all menu options inside the viewport, even if they are very wide. Part of https://github.com/vector-im/riot-web/issues/9624 --- src/components/views/messages/MessageActionBar.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js index 84474710cd7..dc579afd4b5 100644 --- a/src/components/views/messages/MessageActionBar.js +++ b/src/components/views/messages/MessageActionBar.js @@ -71,7 +71,7 @@ export default class MessageActionBar extends React.PureComponent { // The window X and Y offsets are to adjust position when zoomed in to page const x = buttonRect.right + window.pageXOffset; - const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19; + const y = buttonRect.bottom + window.pageYOffset; const { getTile, getReplyThread } = this.props; const tile = getTile && getTile(); @@ -83,9 +83,10 @@ export default class MessageActionBar extends React.PureComponent { } createMenu(MessageContextMenu, { - chevronOffset: 10, mxEvent: this.props.mxEvent, - left: x, + 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,