From dceba35a557332dc244284e912269ce8195f9ec8 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 12 Sep 2024 16:24:36 +0100
Subject: [PATCH] Portal: Fix positioning when `bodyScrolling` is disabled
 (#93277)

fix portal when bodyScrolling is disabled
---
 .../src/components/Portal/Portal.tsx          | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

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