root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 31 Packages Projects Releases Wiki Activity

MetricGraphScene: Position properly when `bodyScrolling` is enabled (#92289) 

handle positioning of MetricGraphScene when bodyScrolling is enabled
This commit is contained in:
Ashley Harrison 2024-08-29 11:35:59 +01:00 committed by GitHub
parent ec89854c5e
commit 68ca6e9610
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/features/trails/MetricGraphScene.tsx
View File

@ -1,6 +1,7 @@
import { css } from '@emotion/css';
import { DashboardCursorSync, GrafanaTheme2 } from '@grafana/data';
import { useChromeHeaderHeight } from '@grafana/runtime';
import {
behaviors,
SceneComponentProps,
@ -35,7 +36,8 @@ export class MetricGraphScene extends SceneObjectBase<MetricGraphSceneState> {
public static Component = ({ model }: SceneComponentProps<MetricGraphScene>) => {
const { topView, selectedTab } = model.useState();
const { stickyMainGraph } = getTrailSettings(model).useState();
const styles = useStyles2(getStyles);
const chromeHeaderHeight = useChromeHeaderHeight();
const styles = useStyles2(getStyles, chromeHeaderHeight ?? 0);
return (
<div className={styles.container}>
@ -48,7 +50,7 @@ export class MetricGraphScene extends SceneObjectBase<MetricGraphSceneState> {
};
}
function getStyles(theme: GrafanaTheme2) {
function getStyles(theme: GrafanaTheme2, chromeHeaderHeight: number) {
return {
container: css({
display: 'flex',
@ -60,7 +62,7 @@ function getStyles(theme: GrafanaTheme2) {
flexDirection: 'row',
background: theme.isLight ? theme.colors.background.primary : theme.colors.background.canvas,
position: 'sticky',
top: '70px',
top: `${chromeHeaderHeight + 70}px`,
zIndex: 10,
}),
nonSticky: css({