From ce8f5b5e1a191ced7d9e1cb3502bc98ca97524e5 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 2 Aug 2024 11:29:51 +0200
Subject: [PATCH] Navigation: Fix `<Portal>` when `bodyScrolling` is enabled
 (#91335)

fix portal when bodyScrolling is enabled
---
 .../src/components/Portal/Portal.tsx          | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Portal/Portal.tsx b/packages/grafana-ui/src/components/Portal/Portal.tsx
index 867ee890821..1dd8e29b374 100644
--- a/packages/grafana-ui/src/components/Portal/Portal.tsx
+++ b/packages/grafana-ui/src/components/Portal/Portal.tsx
@@ -1,8 +1,11 @@
+import { css, cx } from '@emotion/css';
 import { PropsWithChildren, useLayoutEffect, useRef } from 'react';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 
-import { useTheme2 } from '../../themes';
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2, useTheme2 } from '../../themes';
 
 interface Props {
   className?: string;
@@ -47,9 +50,27 @@ export function getPortalContainer() {
 
 /** @internal */
 export function PortalContainer() {
-  return <div id="grafana-portal-container" />;
+  const styles = useStyles2(getStyles);
+  const isBodyScrolling = window.grafanaBootData?.settings.featureToggles.bodyScrolling;
+  return (
+    <div
+      id="grafana-portal-container"
+      className={cx({
+        [styles.grafanaPortalContainer]: isBodyScrolling,
+      })}
+    />
+  );
 }
 
+const getStyles = (theme: GrafanaTheme2) => ({
+  grafanaPortalContainer: css({
+    position: 'fixed',
+    top: 0,
+    width: '100%',
+    zIndex: theme.zIndex.portal,
+  }),
+});
+
 export const RefForwardingPortal = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
   return <Portal {...props} forwardedRef={ref} />;
 });