From 68ca6e9610ce11f465b8905122e38dfef4327d18 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 29 Aug 2024 11:35:59 +0100
Subject: [PATCH] MetricGraphScene: Position properly when `bodyScrolling` is
 enabled (#92289)

handle positioning of MetricGraphScene when bodyScrolling is enabled
---
 public/app/features/trails/MetricGraphScene.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/public/app/features/trails/MetricGraphScene.tsx b/public/app/features/trails/MetricGraphScene.tsx
index 256b0a68e7a..5e439480f71 100644
--- a/public/app/features/trails/MetricGraphScene.tsx
+++ b/public/app/features/trails/MetricGraphScene.tsx
@@ -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({