From 3761cd405446891d4c5d0b7319fb163cbe469fcc Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Mon, 14 May 2018 16:35:12 +0100
Subject: [PATCH 1/2] When panels are shown/hidden, hide sticker picker

---
 src/components/views/rooms/Stickerpicker.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js
index 2a523e5e82..1ea5639688 100644
--- a/src/components/views/rooms/Stickerpicker.js
+++ b/src/components/views/rooms/Stickerpicker.js
@@ -127,10 +127,19 @@ export default class Stickerpicker extends React.Component {
     }
 
     _onWidgetAction(payload) {
-        if (payload.action === "user_widget_updated") {
-            this.forceUpdate();
-        } else if (payload.action === "stickerpicker_close") {
-            this.setState({showStickers: false});
+        switch (payload.action) {
+            case "user_widget_updated":
+                this.forceUpdate();
+                break;
+            case "stickerpicker_close":
+                this.setState({showStickers: false});
+                break;
+            case "show_right_panel":
+            case "hide_right_panel":
+            case "show_left_panel":
+            case "hide_left_panel":
+                this.setState({showStickers: false});
+                break;
         }
     }
 

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 2/2] 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}