[v11.0.x] DataTrails: Fixes home page background issue to make Cards work better (#86185)

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 d039a0a485)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

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>
           )}
         />

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',