Merge branch 'ph/349230/emojiBehindFileTree' into 'master'

Fix emoji menu being behind diff file tree list

See merge request gitlab-org/gitlab!79031

app/assets/javascripts/diffs/components/app.vue

@@ -653,7 +653,7 @@ export default {
         <div
           v-if="renderFileTree"
           :style="{ width: `${treeWidth}px` }"
-          class="diff-tree-list js-diff-tree-list px-3 pr-md-0"
+          class="diff-tree-list js-diff-tree-list gl-px-5"
         >
           <panel-resizer
             :size.sync="treeWidth"

app/assets/javascripts/vue_shared/components/awards_list.vue

@@ -75,6 +75,9 @@ export default {
       return this.noteAuthorId === this.currentUserId;
     },
   },
+  mounted() {
+    this.virtualScrollerItem = this.$el.closest('.vue-recycle-scroller__item-view');
+  },
   methods: {
     getAwardClassBindings(awardList) {
       return {
@@ -162,6 +165,10 @@ export default {
     },
     setIsMenuOpen(menuOpen) {
       this.isMenuOpen = menuOpen;
+
+      if (this.virtualScrollerItem) {
+        this.virtualScrollerItem.style.zIndex = this.isMenuOpen ? 1 : null;
+      }
     },
   },
   safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },

app/assets/stylesheets/page_bundles/merge_requests.scss

@@ -45,11 +45,9 @@
   top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px));
   // stylelint-disable-next-line length-zero-no-unit
   max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px));
-  z-index: 205;
 
   .drag-handle {
     bottom: 16px;
-    transform: translateX(10px);
   }
 }