UI polish of super sidebar flyout menu

app/assets/javascripts/super_sidebar/components/flyout_menu.vue

 <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"

app/assets/javascripts/super_sidebar/components/nav_item.vue

@@ -109,7 +109,8 @@ export default {
       return {
         'gl-px-2 gl-mx-2 gl-line-height-normal': this.isSubitem,
         'gl-px-3': !this.isSubitem,
-        'gl-pl-5!': this.isFlyout,
+        'gl-pl-5! gl-rounded-small': this.isFlyout,
+        'gl-rounded-base': !this.isFlyout,
         [this.item.link_classes]: this.item.link_classes,
         ...this.linkClasses,
       };
@@ -127,7 +128,7 @@ export default {
       :is="navItemLinkComponent"
       #default="{ isActive }"
       v-bind="linkProps"
-      class="nav-item-link gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-min-h-7 gl-gap-3 gl-mb-1 gl-py-2 gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-text-decoration-none! gl-focus--focus"
+      class="nav-item-link gl-relative gl-display-flex gl-align-items-center gl-min-h-7 gl-gap-3 gl-mb-1 gl-py-2 gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-text-decoration-none! gl-focus--focus"
       :class="computedLinkClasses"
       data-qa-selector="nav_item_link"
       data-testid="nav-item-link"