Add latest changes from gitlab-org/gitlab@master

1 files changed, 4 insertions, 4 deletions

diff --git a/app/assets/javascripts/super_sidebar/components/flyout_menu.vue b/app/assets/javascripts/super_sidebar/components/flyout_menu.vue
index 285fa8ee90b..fa7960da2f4 100644
--- a/app/assets/javascripts/super_sidebar/components/flyout_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/flyout_menu.vue
@@ -1,5 +1,5 @@
 <script>
-import { computePosition, autoUpdate, flip, shift } from '@floating-ui/dom';
+import { computePosition, autoUpdate, offset, flip, shift } from '@floating-ui/dom';
 import NavItem from './nav_item.vue';
 
 export default {
@@ -22,7 +22,7 @@ export default {
 
     function updatePosition() {
       return computePosition(target, flyout, {
-        middleware: [flip(), shift()],
+        middleware: [offset({ alignmentAxis: -12 }), flip(), shift()],
         placement: 'right-start',
         strategy: 'fixed',
       }).then(({ x, y }) => {
@@ -44,13 +44,13 @@ export default {
 <template>
   <div
     :id="`${targetId}-flyout`"
-    class="gl-fixed gl-pl-3 gl-z-index-9999 gl-max-h-full gl-overflow-y-auto"
+    class="gl-fixed gl-p-4 gl-mx-n1 gl-z-index-9999 gl-max-h-full gl-overflow-y-auto"
     @mouseover="$emit('mouseover')"
     @mouseleave="$emit('mouseleave')"
   >
     <ul
       v-if="items.length > 0"
-      class="gl-min-w-20 gl-max-w-34 gl-border-1 gl-rounded-base gl-border-solid gl-border-gray-100 gl-shadow gl-bg-white gl-p-2 gl-pb-1 gl-list-style-none"
+      class="gl-min-w-20 gl-max-w-34 gl-border-1 gl-rounded-base gl-border-solid gl-border-gray-100 gl-shadow-md gl-bg-white gl-p-2 gl-pb-1 gl-list-style-none"
     >
       <nav-item
         v-for="item of items"