From 6f73777d59ca1e69d2d5d2c30eca9ca1f97b71c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 20 Mar 2023 15:43:05 +0100
Subject: [PATCH] SectionNav: Make section toggle not take up horizontal space
 (#64898)

---
 public/app/core/components/PageNew/SectionNav.tsx       | 1 +
 public/app/core/components/PageNew/SectionNavItem.tsx   | 3 +++
 public/app/core/components/PageNew/SectionNavToggle.tsx | 4 +++-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/public/app/core/components/PageNew/SectionNav.tsx b/public/app/core/components/PageNew/SectionNav.tsx
index 430df2cf918..746ac980cc1 100644
--- a/public/app/core/components/PageNew/SectionNav.tsx
+++ b/public/app/core/components/PageNew/SectionNav.tsx
@@ -68,6 +68,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     navContainer: css({
       display: 'flex',
       flexDirection: 'column',
+      position: 'relative',
 
       [theme.breakpoints.up('md')]: {
         flexDirection: 'row',
diff --git a/public/app/core/components/PageNew/SectionNavItem.tsx b/public/app/core/components/PageNew/SectionNavItem.tsx
index c05c2499407..6a4e392f0b1 100644
--- a/public/app/core/components/PageNew/SectionNavItem.tsx
+++ b/public/app/core/components/PageNew/SectionNavItem.tsx
@@ -84,6 +84,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     activeStyle: css`
       label: activeTabStyle;
       color: ${theme.colors.text.primary};
+      font-weight: ${theme.typography.fontWeightMedium};
       background: ${theme.colors.emphasize(theme.colors.background.canvas, 0.03)};
 
       &::before {
@@ -115,6 +116,8 @@ const getStyles = (theme: GrafanaTheme2) => {
       fontSize: theme.typography.h5.fontSize,
       marginTop: theme.spacing(2),
       fontWeight: theme.typography.fontWeightMedium,
+      // To make room for section toggle button when section is active
+      marginRight: theme.spacing(4),
     }),
     noRootMargin: css({
       marginBottom: 0,
diff --git a/public/app/core/components/PageNew/SectionNavToggle.tsx b/public/app/core/components/PageNew/SectionNavToggle.tsx
index cf744eebcd4..d500d5620fe 100644
--- a/public/app/core/components/PageNew/SectionNavToggle.tsx
+++ b/public/app/core/components/PageNew/SectionNavToggle.tsx
@@ -36,7 +36,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
   icon: css({
     alignSelf: 'center',
     margin: theme.spacing(1, 0),
-    top: theme.spacing(0),
     transform: 'rotate(90deg)',
     transition: theme.transitions.create('opacity'),
     color: theme.colors.text.secondary,
@@ -61,6 +60,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
     [theme.breakpoints.up('md')]: {
       opacity: 0,
       margin: 0,
+      position: 'absolute',
+      right: 0,
+      left: 'initial',
     },
   }),
 });