fix position of emoji picker (#6837)

2 files changed, 20 insertions, 3 deletions

diff --git a/webapp/components/emoji_picker/emoji_picker.jsx b/webapp/components/emoji_picker/emoji_picker.jsx
index 2a5b84747..a047c1277 100644
--- a/webapp/components/emoji_picker/emoji_picker.jsx
+++ b/webapp/components/emoji_picker/emoji_picker.jsx
@@ -31,11 +31,18 @@ const CATEGORIES = [
 export default class EmojiPicker extends React.Component {
     static propTypes = {
         style: PropTypes.object,
+        rightOffset: PropTypes.number,
+        topOffset: PropTypes.number,
         placement: PropTypes.oneOf(['top', 'bottom', 'left']),
         customEmojis: PropTypes.object,
         onEmojiClick: PropTypes.func.isRequired
     }
 
+    static defaultProps = {
+        rightOffset: 0,
+        topOffset: 0
+    };
+
     constructor(props) {
         super(props);
 
@@ -299,13 +306,17 @@ export default class EmojiPicker extends React.Component {
                 pickerStyle = {
                     top: this.props.style.top,
                     bottom: this.props.style.bottom,
-                    right: 1
+                    right: this.props.rightOffset
                 };
             } else {
                 pickerStyle = this.props.style;
             }
         }
 
+        if (pickerStyle && pickerStyle.top) {
+            pickerStyle.top += this.props.topOffset;
+        }
+
         return (
             <div
                 className='emoji-picker'
diff --git a/webapp/components/emoji_picker/emoji_picker_overlay.jsx b/webapp/components/emoji_picker/emoji_picker_overlay.jsx
index 09cc0a36c..0a289a242 100644
--- a/webapp/components/emoji_picker/emoji_picker_overlay.jsx
+++ b/webapp/components/emoji_picker/emoji_picker_overlay.jsx
@@ -13,7 +13,9 @@ export default class EmojiPickerOverlay extends React.PureComponent {
         container: PropTypes.func,
         target: PropTypes.func.isRequired,
         onEmojiClick: PropTypes.func.isRequired,
-        onHide: PropTypes.func.isRequired
+        onHide: PropTypes.func.isRequired,
+        rightOffset: PropTypes.number,
+        topOffset: PropTypes.number
     }
 
     constructor(props) {
@@ -55,7 +57,11 @@ export default class EmojiPickerOverlay extends React.PureComponent {
                 target={this.props.target}
                 animation={false}
             >
-                <EmojiPicker onEmojiClick={this.props.onEmojiClick}/>
+                <EmojiPicker
+                    onEmojiClick={this.props.onEmojiClick}
+                    rightOffset={this.props.rightOffset}
+                    topOffset={this.props.topOffset}
+                />
             </Overlay>
         );
     }