IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Portal: Fix positioning when bodyScrolling is disabled (#93277)

Browse Source 
fix portal when bodyScrolling is disabled
This commit is contained in:
Ashley Harrison 2024-09-12 16:24:36 +01:00 committed by GitHub
parent 2a8f6755d5
commit dceba35a55
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/grafana-ui/src/components/Portal/Portal.tsx
View File

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