From facb6f63ebec4edbf90c63dbd097d59705353550 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Mon, 15 Apr 2024 16:29:00 +0100
Subject: [PATCH] [v11.0.x] DataTrails: Fixes home page background issue to
 make Cards work better (#86185)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DataTrails: Fixes home page background issue to make Cards work better (#85055)

* DataTrails: Fixes home page background issue to make Cards work better

* Update DataTrailsHome.tsx

(cherry picked from commit d039a0a4854951689c7620315bcfdfc0f4f5a2cd)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 public/app/features/trails/DataTrailsApp.tsx  | 12 ++++++++----
 public/app/features/trails/DataTrailsHome.tsx |  4 +---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/public/app/features/trails/DataTrailsApp.tsx b/public/app/features/trails/DataTrailsApp.tsx
index e76877926dc..9622851ca5a 100644
--- a/public/app/features/trails/DataTrailsApp.tsx
+++ b/public/app/features/trails/DataTrailsApp.tsx
@@ -10,6 +10,7 @@ import { Page } from 'app/core/components/Page/Page';
 
 import { DataTrail } from './DataTrail';
 import { DataTrailsHome } from './DataTrailsHome';
+import { MetricsHeader } from './MetricsHeader';
 import { getTrailStore } from './TrailStore/TrailStore';
 import { HOME_ROUTE, TRAILS_ROUTE } from './shared';
 import { getMetricName, getUrlForTrail, newMetricsTrail } from './utils';
@@ -39,10 +40,13 @@ export class DataTrailsApp extends SceneObjectBase<DataTrailsAppState> {
           exact={true}
           path={HOME_ROUTE}
           render={() => (
-            <Page navId="explore/metrics" layout={PageLayoutType.Custom}>
-              <div className={styles.customPage}>
-                <home.Component model={home} />
-              </div>
+            <Page
+              navId="explore/metrics"
+              layout={PageLayoutType.Standard}
+              renderTitle={() => <MetricsHeader />}
+              subTitle=""
+            >
+              <home.Component model={home} />
             </Page>
           )}
         />
diff --git a/public/app/features/trails/DataTrailsHome.tsx b/public/app/features/trails/DataTrailsHome.tsx
index 3983fa042ea..bb44c43973f 100644
--- a/public/app/features/trails/DataTrailsHome.tsx
+++ b/public/app/features/trails/DataTrailsHome.tsx
@@ -10,7 +10,6 @@ import { Text } from '@grafana/ui/src/components/Text/Text';
 import { DataTrail } from './DataTrail';
 import { DataTrailCard } from './DataTrailCard';
 import { DataTrailsApp } from './DataTrailsApp';
-import { MetricsHeader } from './MetricsHeader';
 import { getTrailStore } from './TrailStore/TrailStore';
 import { getDatasourceForNewTrail, getUrlForTrail, newMetricsTrail } from './utils';
 
@@ -54,11 +53,11 @@ export class DataTrailsHome extends SceneObjectBase<DataTrailsHomeState> {
     return (
       <div className={styles.container}>
         <Stack direction={'column'} gap={1} alignItems={'start'}>
-          <MetricsHeader />
           <Button icon="plus" size="md" variant="primary" onClick={model.onNewMetricsTrail}>
             New metric exploration
           </Button>
         </Stack>
+
         <Stack gap={5}>
           <div className={styles.column}>
             <Text variant="h4">Recent metrics</Text>
@@ -105,7 +104,6 @@ function getAppFor(model: SceneObject) {
 function getStyles(theme: GrafanaTheme2) {
   return {
     container: css({
-      padding: theme.spacing(2),
       flexGrow: 1,
       display: 'flex',
       flexDirection: 'column',