From 38809d73c246a75d0892ee9754c5737b38ac67a4 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Wed, 13 Apr 2022 14:41:48 +0100
Subject: [PATCH] Nav: Icon clickable area fills all available space (#47334)

Closes #47255
---
 .../app/core/components/NavBar/Next/NavBarItemWithoutMenu.tsx | 1 -
 public/app/core/components/NavBar/Next/NavBarMenu.tsx         | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/app/core/components/NavBar/Next/NavBarItemWithoutMenu.tsx b/public/app/core/components/NavBar/Next/NavBarItemWithoutMenu.tsx
index d990ff34e55..a8dd795fb10 100644
--- a/public/app/core/components/NavBar/Next/NavBarItemWithoutMenu.tsx
+++ b/public/app/core/components/NavBar/Next/NavBarItemWithoutMenu.tsx
@@ -71,7 +71,6 @@ export function getNavBarItemWithoutMenuStyles(theme: GrafanaTheme2, isActive?:
       position: 'relative',
       color: isActive ? theme.colors.text.primary : theme.colors.text.secondary,
       display: 'grid',
-      placeItems: 'center',
 
       '&:hover': {
         backgroundColor: theme.colors.action.hover,
diff --git a/public/app/core/components/NavBar/Next/NavBarMenu.tsx b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
index c7dc7e3017f..224e32ff66e 100644
--- a/public/app/core/components/NavBar/Next/NavBarMenu.tsx
+++ b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
@@ -356,6 +356,7 @@ function CollapsibleNavItem({
           onClose();
         }}
         className={styles.collapsibleMenuItem}
+        elClassName={styles.collapsibleIcon}
       >
         {link.img && (
           <img src={link.img} alt={`${link.text} logo`} height="24" width="24" style={{ borderRadius: '50%' }} />
@@ -392,6 +393,9 @@ const getCollapsibleStyles = (theme: GrafanaTheme2) => ({
     height: theme.spacing(6),
     width: theme.spacing(7),
     display: 'grid',
+  }),
+  collapsibleIcon: css({
+    display: 'grid',
     placeContent: 'center',
   }),
   collapsibleSectionWrapper: css({