Correctly positioned the is-above flyouts

Changelog: fixed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/65735

app/assets/javascripts/fly_out_nav.js

@@ -88,12 +88,12 @@ export const moveSubItemsToPosition = (el, subItems) => {
   const boundingRect = el.getBoundingClientRect();
   const left = sidebar ? sidebar.offsetWidth : COLLAPSED_PANEL_WIDTH;
   let top = calculateTop(boundingRect, subItems.offsetHeight);
+  const isAbove = top < boundingRect.top;
   if (hasSubItems) {
-    top -= header.offsetHeight;
+    top = isAbove ? top : top - header.offsetHeight;
   } else {
     top = boundingRect.top;
   }
-  const isAbove = top <= boundingRect.top;
 
   subItems.classList.add('fly-out-list');
   subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - getHeaderHeight()}px, 0)`; // eslint-disable-line no-param-reassign

app/assets/stylesheets/framework/contextual_sidebar.scss

@@ -316,6 +316,10 @@
 
   a.has-sub-items + .sidebar-sub-level-items.fly-out-list {
     @include gl-mt-n2;
+
+    &.is-above {
+      @include gl-mt-2;
+    }
   }
 
   @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {