From fa976454c1c998d3beee45b5663a96c2f609edbc Mon Sep 17 00:00:00 2001
From: Jacopo <beschi.jacopo@gmail.com>
Date: Fri, 22 Mar 2019 18:05:56 +0100
Subject: Makes emoji picker full width on mobile

---
 app/assets/javascripts/awards_handler.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'app/assets/javascripts/awards_handler.js')

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index aeb88715c11..3826ecd1ac1 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -8,6 +8,7 @@ import { updateTooltipTitle } from './lib/utils/common_utils';
 import { isInVueNoteablePage } from './lib/utils/dom_utils';
 import flash from './flash';
 import axios from './lib/utils/axios_utils';
+import bp from './breakpoints';
 
 const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
 const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';
@@ -264,7 +265,10 @@ export class AwardsHandler {
     const css = {
       top: `${$addBtn.offset().top + $addBtn.outerHeight()}px`,
     };
-    if (position === 'right') {
+    // for xs screen we position the element on center
+    if (bp.getBreakpointSize() === 'xs') {
+      css.left = '5%';
+    } else if (position === 'right') {
       css.left = `${$addBtn.offset().left - $menu.outerWidth() + 20}px`;
       $menu.addClass('is-aligned-right');
     } else {
-- 
cgit v1.2.3