SectionNav: Make section toggle not take up horizontal space (#64898)

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

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,

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',
     },
   }),
 });