SONAR-19068 Fix scrolling issue

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

@@ -23,7 +23,6 @@ import { LAYOUT_VIEWPORT_MIN_WIDTH } from '../helpers';
 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

@@ -20,6 +20,7 @@
 
 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';
@@ -63,10 +64,13 @@ export class ComponentContainer extends React.PureComponent<Props, State> {
   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) {
@@ -335,14 +339,18 @@ export class ComponentContainer extends React.PureComponent<Props, State> {
         {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

@@ -84,6 +84,10 @@ export default function GlobalContainer() {
                             <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

@@ -22,7 +22,6 @@
 }
 
 .system-announcement-banner {
-  position: fixed;
   width: 100%;
   z-index: var(--globalBannerZIndex);
 }

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

@@ -22,7 +22,6 @@
 }
 
 .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

@@ -19,7 +19,6 @@
  */
 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';
@@ -57,36 +56,24 @@ export default function ComponentNav(props: ComponentNavProps) {
     }
   }, [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

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