From e233c963a39ef22d63570ddc8936afc08a156fdb Mon Sep 17 00:00:00 2001
From: Darren Janeczek <38694490+darrenjaneczek@users.noreply.github.com>
Date: Thu, 21 Mar 2024 13:49:32 -0400
Subject: [PATCH] datatrails: fix dark mode drawer background clashing with
 data trail backgrounds (#84941)

fix: drawer background clashed with data trail bgs
---
 .../trails/Integrations/SceneDrawer.tsx       | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/public/app/features/trails/Integrations/SceneDrawer.tsx b/public/app/features/trails/Integrations/SceneDrawer.tsx
index b48fe048ef0..0cb7a29bf35 100644
--- a/public/app/features/trails/Integrations/SceneDrawer.tsx
+++ b/public/app/features/trails/Integrations/SceneDrawer.tsx
@@ -1,7 +1,9 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
 import { SceneComponentProps, SceneObjectBase, SceneObject, SceneObjectState } from '@grafana/scenes';
-import { Drawer } from '@grafana/ui';
+import { Drawer, useStyles2 } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { ShowModalReactEvent } from 'app/types/events';
 
@@ -13,9 +15,11 @@ export type SceneDrawerProps = {
 
 export function SceneDrawer(props: SceneDrawerProps) {
   const { scene, title, onDismiss } = props;
+  const styles = useStyles2(getStyles);
+
   return (
     <Drawer title={title} onClose={onDismiss} size="lg">
-      <div style={{ display: 'flex', height: '100%' }}>
+      <div className={styles.drawerInnerWrapper}>
         <scene.Component model={scene} />
       </div>
     </Drawer>
@@ -44,3 +48,17 @@ export function launchSceneDrawerInGlobalModal(props: Omit<SceneDrawerProps, 'on
 
   appEvents.publish(new ShowModalReactEvent(payload));
 }
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    drawerInnerWrapper: css({
+      display: 'flex',
+      padding: theme.spacing(2),
+      background: theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary,
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+    }),
+  };
+}