diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js index 1ea5639688..8f9e96dd3b 100644 --- a/src/components/views/rooms/Stickerpicker.js +++ b/src/components/views/rooms/Stickerpicker.js @@ -252,16 +252,33 @@ export default class Stickerpicker extends React.Component { * @param {Event} e Event that triggered the function */ _onShowStickersClick(e) { + // XXX: Simplify by using a context menu that is positioned relative to the sticker picker button + const buttonRect = e.target.getBoundingClientRect(); // The window X and Y offsets are to adjust position when zoomed in to page - const x = buttonRect.right + window.pageXOffset - 42; + let x = buttonRect.right + window.pageXOffset - 41; + + // Amount of horizontal space between the right of menu and the right of the viewport + // (10 = amount needed to make chevron centrally aligned) + const rightPad = 10; + + // When the sticker picker would be displayed off of the viewport, adjust x + // (302 = width of context menu, including borders) + x = Math.min(x, document.body.clientWidth - (302 + rightPad)); + + // Offset the chevron location, which is relative to the left of the context menu + // (10 = offset when context menu would not be displayed off viewport) + // (8 = value required in practice (possibly 10 - 2 where the 2 = context menu borders) + const stickerPickerChevronOffset = Math.max(10, 8 + window.pageXOffset + buttonRect.left - x); + const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19; this.setState({ showStickers: true, stickerPickerX: x, stickerPickerY: y, + stickerPickerChevronOffset, }); } @@ -314,7 +331,7 @@ export default class Stickerpicker extends React.Component { const stickerPicker =