From 962eba39acb450a85abc2f7e4637f944b3df0b9a Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 4 Apr 2022 14:48:58 +0100
Subject: [PATCH] Navigation: Make expandable menu items fill content properly
 (#47264)

---
 .../app/core/components/NavBar/Next/NavBarItemWithoutMenu.tsx | 4 ++--
 public/app/core/components/NavBar/Next/NavBarMenu.tsx         | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/NavBar/Next/NavBarItemWithoutMenu.tsx b/public/app/core/components/NavBar/Next/NavBarItemWithoutMenu.tsx
index 35a700d6c1c..aaa0af55995 100644
--- a/public/app/core/components/NavBar/Next/NavBarItemWithoutMenu.tsx
+++ b/public/app/core/components/NavBar/Next/NavBarItemWithoutMenu.tsx
@@ -32,10 +32,10 @@ export function NavBarItemWithoutMenu({
 
   const content = highlightText ? (
     <NavFeatureHighlight>
-      <span className={styles.icon}>{children}</span>
+      <div className={styles.icon}>{children}</div>
     </NavFeatureHighlight>
   ) : (
-    <span className={styles.icon}>{children}</span>
+    <div className={styles.icon}>{children}</div>
   );
 
   const elStyle = cx(styles.element, elClassName);
diff --git a/public/app/core/components/NavBar/Next/NavBarMenu.tsx b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
index 319832db4ab..63232cc6596 100644
--- a/public/app/core/components/NavBar/Next/NavBarMenu.tsx
+++ b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
@@ -178,6 +178,7 @@ const getNavItemStyles = (theme: GrafanaTheme2) => ({
     alignItems: 'center',
   }),
   fullWidth: css({
+    height: '100%',
     width: '100%',
   }),
   iconContainer: css({
@@ -188,6 +189,7 @@ const getNavItemStyles = (theme: GrafanaTheme2) => ({
     gridAutoFlow: 'column',
     gridTemplateColumns: `${theme.spacing(7)} auto`,
     alignItems: 'center',
+    height: '100%',
   }),
   linkText: css({
     fontSize: theme.typography.pxToRem(14),