From 772ddbc3c06adce0988d556bc38e4a7353609535 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 19 Apr 2023 15:27:34 +0100
Subject: [PATCH] Navigation: Vertically align section nav icon at the top when
 the text wraps (#66860)

* vertically align section nav icon at the top

* use theme for img width
---
 .../components/AppChrome/SectionNav/SectionNavItem.tsx     | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/public/app/core/components/AppChrome/SectionNav/SectionNavItem.tsx b/public/app/core/components/AppChrome/SectionNav/SectionNavItem.tsx
index a2840d6020f..d7e0579adfc 100644
--- a/public/app/core/components/AppChrome/SectionNav/SectionNavItem.tsx
+++ b/public/app/core/components/AppChrome/SectionNav/SectionNavItem.tsx
@@ -32,7 +32,7 @@ export function SectionNavItem({ item, isSectionRoot = false }: Props) {
   if (item.img) {
     icon = <img data-testid="section-image" className={styles.sectionImg} src={item.img} alt="" />;
   } else if (item.icon) {
-    icon = <Icon data-testid="section-icon" name={item.icon} />;
+    icon = <Icon data-testid="section-icon" className={styles.sectionImg} name={item.icon} />;
   }
 
   const onItemClicked = () => {
@@ -68,7 +68,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     link: css`
       padding: ${theme.spacing(1, 0, 1, 1.5)};
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       border-radius: ${theme.shape.radius.default};
       gap: ${theme.spacing(1)};
       height: 100%;
@@ -103,7 +103,8 @@ const getStyles = (theme: GrafanaTheme2) => {
       margin-left: ${theme.spacing(1)};
     `,
     sectionImg: css({
-      width: 18,
+      margin: '6px 0',
+      width: theme.spacing(2),
     }),
     isSectionRoot: css({
       fontSize: theme.typography.h4.fontSize,