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