From e0236c3d3e4f832ab3b1adbc23c15ef64eab7dfa Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Mon, 14 May 2018 17:05:23 +0100
Subject: [PATCH] Fix issue with sticker picker rendering off-screen

when the RightPanel is collapsed on a small monitor
and the sticker picker is opened.
---
 src/components/views/rooms/Stickerpicker.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

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 = <ContextualMenu
             elementClass={GenericElementContextMenu}
-            chevronOffset={10}
+            chevronOffset={this.state.stickerPickerChevronOffset}
             chevronFace={'bottom'}
             left={this.state.stickerPickerX}
             top={this.state.stickerPickerY}