diff --git a/public/app/core/components/PageNew/Page.tsx b/public/app/core/components/PageNew/Page.tsx
index 00316949a82..2b7e33c0364 100644
--- a/public/app/core/components/PageNew/Page.tsx
+++ b/public/app/core/components/PageNew/Page.tsx
@@ -124,13 +124,21 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     pageInner: css({
       label: 'page-inner',
-      padding: theme.spacing(3),
+      padding: theme.spacing(2),
       boxShadow: shadow,
       background: theme.colors.background.primary,
-      margin: theme.spacing(2, 2, 2, 1),
       display: 'flex',
       flexDirection: 'column',
       flexGrow: 1,
+      margin: theme.spacing(0, 0, 0, 0),
+
+      [theme.breakpoints.up('sm')]: {
+        margin: theme.spacing(0, 1, 1, 1),
+      },
+      [theme.breakpoints.up('md')]: {
+        margin: theme.spacing(2, 2, 2, 1),
+        padding: theme.spacing(3),
+      },
     }),
     canvasContent: css({
       label: 'canvas-content',
diff --git a/public/app/core/components/PageNew/SectionNav.tsx b/public/app/core/components/PageNew/SectionNav.tsx
index 6ff158cd411..db0abc1b6ff 100644
--- a/public/app/core/components/PageNew/SectionNav.tsx
+++ b/public/app/core/components/PageNew/SectionNav.tsx
@@ -71,37 +71,39 @@ const getStyles = (theme: GrafanaTheme2) => {
       background: theme.colors.background.canvas,
       flexShrink: 0,
       transition: theme.transitions.create(['width', 'max-height']),
+      maxHeight: 0,
       [theme.breakpoints.up('md')]: {
         width: 0,
-      },
-      [theme.breakpoints.down('md')]: {
-        maxHeight: 0,
+        maxHeight: 'unset',
       },
     }),
     navExpanded: css({
+      maxHeight: '50vh',
       [theme.breakpoints.up('md')]: {
         width: '250px',
-      },
-      [theme.breakpoints.down('md')]: {
-        maxHeight: '50vh',
+        maxHeight: 'unset',
       },
     }),
     items: css({
       display: 'flex',
       flexDirection: 'column',
-      padding: theme.spacing(4.5, 1, 2, 2),
+      padding: theme.spacing(2, 1, 2, 2),
       minWidth: '250px',
+      [theme.breakpoints.up('md')]: {
+        padding: theme.spacing(4.5, 1, 2, 2),
+      },
     }),
     collapseIcon: css({
       border: `1px solid ${theme.colors.border.weak}`,
-      transform: 'translateX(50%)',
-      top: theme.spacing(8),
-      right: theme.spacing(-1),
+      left: '50%',
+      transform: 'translate(-50%, 50%) rotate(90deg)',
+      top: theme.spacing(0),
 
-      [theme.breakpoints.down('md')]: {
-        left: '50%',
-        transform: 'translate(-50%, 50%) rotate(90deg)',
-        top: theme.spacing(2),
+      [theme.breakpoints.up('md')]: {
+        transform: 'translateX(50%)',
+        top: theme.spacing(8),
+        left: theme.spacing(1),
+        right: theme.spacing(-1),
       },
     }),
   };
diff --git a/public/app/core/components/PageNew/SectionNavToggle.tsx b/public/app/core/components/PageNew/SectionNavToggle.tsx
index 208a10efac8..1e859335129 100644
--- a/public/app/core/components/PageNew/SectionNavToggle.tsx
+++ b/public/app/core/components/PageNew/SectionNavToggle.tsx
@@ -17,6 +17,7 @@ export const SectionNavToggle = ({ className, isExpanded, onClick }: Props) => {
 
   return (
     <IconButton
+      tooltip={'Toggle section navigation'}
       aria-label={isExpanded ? 'Close section navigation' : 'Open section navigation'}
       name={isExpanded ? 'angle-left' : 'angle-right'}
       className={classnames(className, styles.icon)}