From 83140f7369ecbbb509eb66a9d5718be02f05ed42 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Fri, 1 Apr 2022 10:42:19 +0100
Subject: [PATCH] Navigation: Fix layout shift for long collapse content
 (#47161)

---
 public/app/core/components/NavBar/Next/NavBarMenu.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/app/core/components/NavBar/Next/NavBarMenu.tsx b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
index 14c77ebd420..404a60f3989 100644
--- a/public/app/core/components/NavBar/Next/NavBarMenu.tsx
+++ b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
@@ -59,6 +59,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     right: 0,
     zIndex: theme.zIndex.sidemenu,
     top: 0,
+    boxSizing: 'content-box',
     [theme.breakpoints.up('md')]: {
       borderRight: `1px solid ${theme.colors.border.weak}`,
       right: 'unset',
@@ -149,6 +150,7 @@ function NavItem({
 const getNavItemStyles = (theme: GrafanaTheme2) => ({
   item: css({
     padding: `${theme.spacing(1)} 0`,
+    whiteSpace: 'normal',
     '&::before': {
       display: 'none',
     },
@@ -236,7 +238,9 @@ function CollapsibleNavItem({
 const getCollapsibleStyles = (theme: GrafanaTheme2) => ({
   menuItem: css({
     position: 'relative',
-    display: 'flex',
+    display: 'grid',
+    gridAutoFlow: 'column',
+    gridTemplateColumns: '56px auto',
   }),
   collapsibleMenuItem: css({
     height: theme.spacing(6),