Merge branch '57648-make-emoji-picker-full-width-on-mobile' into 'master'

Resolve "Make emoji picker full-width on mobile"

Closes #57648

See merge request gitlab-org/gitlab-ce!25883

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 {

app/assets/stylesheets/framework/variables.scss

@@ -415,7 +415,7 @@ $award-emoji-menu-shadow: rgba(0, 0, 0, 0.175);
 $award-emoji-positive-add-bg: #fed159;
 $award-emoji-positive-add-lines: #bb9c13;
 $award-emoji-width: 376px;
-$award-emoji-width-xs: 300px;
+$award-emoji-width-xs: 90%;
 
 /*
  * Search Box

changelogs/unreleased/57648-make-emoji-picker-full-width-on-mobile.yml

+---
+title: Makes emoji picker full width on mobile.
+merge_request: 25883
+author: Jacopo Beschi @jacopo-beschi
+type: fixed