Navigation: wrap long items in the menu correctly (#47431)

* start implementing wrapping behaviour

* handle more cases

* minWidth > width to preserve mobile behaviour

* Better css

public/app/core/components/NavBar/Next/NavBarItemWithoutMenu.tsx

@@ -84,7 +84,7 @@ export function getNavBarItemWithoutMenuStyles(theme: GrafanaTheme2, isActive?:
       color: 'inherit',
       display: 'block',
       padding: 0,
-      textAlign: 'center',
+      overflowWrap: 'anywhere',
 
       '&::before': {
         display: isActive ? 'block' : 'none',

public/app/core/components/NavBar/Next/NavBarMenu.tsx

@@ -96,7 +96,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     bottom: 0,
     flexDirection: 'column',
     left: 0,
-    whiteSpace: 'nowrap',
     paddingTop: theme.spacing(1),
     marginRight: theme.spacing(1.5),
     right: 0,
@@ -126,6 +125,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   itemList: css({
     display: 'grid',
     gridAutoRows: `minmax(${theme.spacing(6)}, auto)`,
+    minWidth: '300px',
   }),
   menuCollapseIcon: css({
     position: 'absolute',
@@ -283,7 +283,6 @@ const getNavItemStyles = (theme: GrafanaTheme2) => ({
   }),
   item: css({
     padding: `${theme.spacing(1)} ${theme.spacing(1.5)}`,
-    whiteSpace: 'normal',
     '&::before': {
       display: 'none',
     },
@@ -312,6 +311,7 @@ const getNavItemStyles = (theme: GrafanaTheme2) => ({
     width: '100%',
   }),
   iconContainer: css({
+    display: 'flex',
     placeContent: 'center',
   }),
   savedItemsMenuItemWrapper: css({
@@ -324,7 +324,7 @@ const getNavItemStyles = (theme: GrafanaTheme2) => ({
   linkText: css({
     fontSize: theme.typography.pxToRem(14),
     justifySelf: 'start',
-    paddingLeft: theme.spacing(0.5),
+    padding: theme.spacing(0.5, 4.25, 0.5, 0.5),
   }),
 });
 
@@ -403,7 +403,8 @@ const getCollapsibleStyles = (theme: GrafanaTheme2) => ({
   collapseWrapper: css({
     paddingLeft: theme.spacing(0.5),
     paddingRight: theme.spacing(4.25),
-    height: theme.spacing(6),
+    minHeight: theme.spacing(6),
+    overflowWrap: 'anywhere',
     alignItems: 'center',
     color: theme.colors.text.secondary,
     '&:hover, &:focus-within': {

public/app/core/components/NavBar/Next/NavBarMenuItem.tsx

@@ -96,9 +96,9 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({
     flex: 1,
     fontSize: 'inherit',
     height: '100%',
+    overflowWrap: 'anywhere',
     padding: '5px 12px 5px 10px',
     textAlign: 'left',
-    whiteSpace: 'nowrap',
     '&:hover, &:focus-visible': {
       backgroundColor: theme.colors.action.hover,
       color: theme.colors.text.primary,