Navigation: Make expandable menu items fill content properly (#47264)

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);

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