diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx index 4801007f4b9..afe44fded86 100644 --- a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx +++ b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx @@ -63,7 +63,7 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
  • {level !== 0 && } @@ -93,6 +93,7 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
    {level === 0 && link.icon && ( @@ -141,9 +142,12 @@ const getStyles = (theme: GrafanaTheme2) => ({ alignItems: 'center', gap: theme.spacing(1), height: theme.spacing(4), - paddingLeft: theme.spacing(1), + paddingLeft: theme.spacing(0.5), position: 'relative', }), + menuItemWithIcon: css({ + paddingLeft: theme.spacing(0), + }), collapseButtonWrapper: css({ display: 'flex', justifyContent: 'center', @@ -178,9 +182,10 @@ const getStyles = (theme: GrafanaTheme2) => ({ alignItems: 'center', gap: theme.spacing(2), minWidth: 0, + paddingLeft: theme.spacing(1), }), - hasIcon: css({ - paddingLeft: theme.spacing(0), + labelWrapperWithIcon: css({ + paddingLeft: theme.spacing(0.5), }), hasActiveChild: css({ color: theme.colors.text.primary, diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItemText.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItemText.tsx index 910a571e2af..6510fda9a27 100644 --- a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItemText.tsx +++ b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItemText.tsx @@ -88,7 +88,6 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({ display: 'flex', gap: '0.5rem', height: '100%', - paddingLeft: theme.spacing(1), width: '100%', }), });