From e8f0f6b7c81644ce14c173f2e32bad9e37fe2602 Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Wed, 1 Nov 2023 12:58:18 +0000
Subject: [PATCH] Page: Remove Canvas background from primary background pages
 (#77008)

* Remove canvas background for primary background pages

* refactor styles
---
 .../core/components/AppChrome/AppChrome.tsx   |  2 +-
 public/app/core/components/Page/Page.tsx      | 43 ++++++++++++-------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/public/app/core/components/AppChrome/AppChrome.tsx b/public/app/core/components/AppChrome/AppChrome.tsx
index dc5d59cd069..a23b75fa50e 100644
--- a/public/app/core/components/AppChrome/AppChrome.tsx
+++ b/public/app/core/components/AppChrome/AppChrome.tsx
@@ -141,7 +141,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       zIndex: theme.zIndex.navbarFixed,
       left: 0,
       right: 0,
-      boxShadow: shadow,
+      boxShadow: config.featureToggles.dockedMegaMenu ? undefined : shadow,
       background: theme.colors.background.primary,
       flexDirection: 'column',
       borderBottom: `1px solid ${theme.colors.border.weak}`,
diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx
index f2490a2d91f..3af15a6629c 100644
--- a/public/app/core/components/Page/Page.tsx
+++ b/public/app/core/components/Page/Page.tsx
@@ -96,23 +96,34 @@ const getStyles = (theme: GrafanaTheme2) => {
       label: 'page-content',
       flexGrow: 1,
     }),
-    pageInner: css({
-      label: 'page-inner',
-      padding: theme.spacing(2),
-      borderRadius: theme.shape.radius.default,
-      border: `1px solid ${theme.colors.border.weak}`,
-      borderBottom: 'none',
-      background: theme.colors.background.primary,
-      display: 'flex',
-      flexDirection: 'column',
-      flexGrow: 1,
-      margin: theme.spacing(0, 0, 0, 0),
-
-      [theme.breakpoints.up('md')]: {
-        margin: theme.spacing(2, 2, 0, config.featureToggles.dockedMegaMenu ? 2 : 1),
-        padding: theme.spacing(3),
+    pageInner: css(
+      {
+        label: 'page-inner',
+        padding: theme.spacing(2),
+        borderBottom: 'none',
+        background: theme.colors.background.primary,
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+        margin: theme.spacing(0, 0, 0, 0),
       },
-    }),
+      config.featureToggles.dockedMegaMenu
+        ? {
+            [theme.breakpoints.up('md')]: {
+              padding: theme.spacing(4),
+            },
+          }
+        : {
+            borderRadius: theme.shape.radius.default,
+            border: `1px solid ${theme.colors.border.weak}`,
+
+            [theme.breakpoints.up('md')]: {
+              margin: theme.spacing(2, 2, 0, 1),
+              padding: theme.spacing(3),
+            },
+          }
+    ),
+
     canvasContent: css({
       label: 'canvas-content',
       display: 'flex',