SONAR-19068 Fix scrolling issue

server/sonar-web/design-system/src/components/TopBar.tsx

 import { themeColor, themeContrast, themeShadow } from '../helpers/theme';
 
 export const TopBar = styled.nav`
-  ${tw`sw-z-top-navbar`}
   ${tw`sw-px-6 sw-pt-4`}
   ${tw`sw-box-border`};
   ${tw`sw-w-full`};

server/sonar-web/src/main/js/app/components/ComponentContainer.tsx

 
 import { differenceBy } from 'lodash';
 import * as React from 'react';
+import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Outlet } from 'react-router-dom';
 import { validateProjectAlmBinding } from '../../api/alm-settings';
   watchStatusTimer?: number;
   mounted = false;
   state: State = { isPending: false, loading: true };
+  portalAnchor: Element | null = null;
 
   componentDidMount() {
     this.mounted = true;
     this.fetchComponent();
+
+    this.portalAnchor = document.querySelector('#component-nav-portal');
   }
 
   componentDidUpdate(prevProps: Props) {
         {component &&
           !([ComponentQualifier.File, ComponentQualifier.TestFile] as string[]).includes(
             component.qualifier
-          ) && (
+          ) &&
+          this.portalAnchor &&
+          /* Use a portal to fix positioning until we can fully review the layout */
+          createPortal(
             <ComponentNav
               component={component}
               currentTask={currentTask}
               isInProgress={isInProgress}
               isPending={isPending}
               projectBindingErrors={projectBindingErrors}
-            />
+            />,
+            this.portalAnchor
           )}
 
         {loading ? (

server/sonar-web/src/main/js/app/components/GlobalContainer.tsx

                             <NCDAutoUpdateMessage />
                             <UpdateNotification dismissable />
                             <GlobalNav location={location} />
+                            {/* The following is the portal anchor point for the component nav
+                             * See ComponentContainer.tsx
+                             */}
+                            <div id="component-nav-portal" />
                           </div>
                           <Outlet />
                         </MetricsContextProvider>

server/sonar-web/src/main/js/app/components/SystemAnnouncement.css

 }
 
 .system-announcement-banner {
-  position: fixed;
   width: 100%;
   z-index: var(--globalBannerZIndex);
 }

server/sonar-web/src/main/js/app/components/indexation/IndexationNotification.css

 }
 
 .indexation-notification-banner {
-  position: fixed;
   width: 100%;
   z-index: var(--globalBannerZIndex);
   margin-bottom: 0 !important;

server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx

  */
 import { TopBar } from 'design-system';
 import * as React from 'react';
-import ScreenPositionHelper from '../../../../components/common/ScreenPositionHelper';
 import NCDAutoUpdateMessage from '../../../../components/new-code-definition/NCDAutoUpdateMessage';
 import { translate } from '../../../../helpers/l10n';
 import { ProjectAlmBindingConfigurationErrors } from '../../../../types/alm-settings';
     }
   }, [component, component.key]);
 
-  let prDecoNotifComponent: JSX.Element;
-  if (projectBindingErrors !== undefined) {
-    prDecoNotifComponent = <ComponentNavProjectBindingErrorNotif component={component} />;
-  }
-
   return (
-    <ScreenPositionHelper className="sw-inline">
-      {({ top }) => (
-        <>
-          <TopBar
-            className="sw-sticky"
-            id="context-navigation"
-            aria-label={translate('qualifier', component.qualifier)}
-            style={{ top: `${top}px` }}
-          >
-            <div className="sw-min-h-10 sw-flex sw-justify-between">
-              <Header component={component} />
-              <HeaderMeta
-                component={component}
-                currentTask={currentTask}
-                isInProgress={isInProgress}
-                isPending={isPending}
-              />
-            </div>
-            <Menu component={component} isInProgress={isInProgress} isPending={isPending} />
-          </TopBar>
-          <NCDAutoUpdateMessage component={component} />
-          {prDecoNotifComponent}
-        </>
+    <>
+      <TopBar id="context-navigation" aria-label={translate('qualifier', component.qualifier)}>
+        <div className="sw-min-h-10 sw-flex sw-justify-between">
+          <Header component={component} />
+          <HeaderMeta
+            component={component}
+            currentTask={currentTask}
+            isInProgress={isInProgress}
+            isPending={isPending}
+          />
+        </div>
+        <Menu component={component} isInProgress={isInProgress} isPending={isPending} />
+      </TopBar>
+      <NCDAutoUpdateMessage component={component} />
+      {projectBindingErrors !== undefined && (
+        <ComponentNavProjectBindingErrorNotif component={component} />
       )}
-    </ScreenPositionHelper>
+    </>
   );
 }

server/sonar-web/src/main/js/app/components/update-notification/UpdateNotification.css

 
 .promote-update-notification .dismissable-alert-banner {
   margin-bottom: 0 !important;
-  position: fixed;
   width: 100%;
   z-index: var(--globalBannerZIndex);
 }