From cf19baf80f7c3f6749edc5405f02a5eb86289de0 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 21 Sep 2022 15:52:06 +0100
Subject: [PATCH] improve responsiveness of breadcrumbs (#55572)

---
 public/app/core/components/AppChrome/NavToolbar.tsx       | 5 ++++-
 public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx | 8 ++++++--
 public/app/core/components/Breadcrumbs/Breadcrumbs.tsx    | 5 +++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/public/app/core/components/AppChrome/NavToolbar.tsx b/public/app/core/components/AppChrome/NavToolbar.tsx
index 727d6a26e6c..ef4ead80e06 100644
--- a/public/app/core/components/AppChrome/NavToolbar.tsx
+++ b/public/app/core/components/AppChrome/NavToolbar.tsx
@@ -37,7 +37,7 @@ export function NavToolbar({
       <div className={styles.menuButton}>
         <IconButton name="bars" tooltip="Toggle menu" tooltipPlacement="bottom" size="xl" onClick={onToggleMegaMenu} />
       </div>
-      <Breadcrumbs breadcrumbs={breadcrumbs} />
+      <Breadcrumbs breadcrumbs={breadcrumbs} className={styles.breadcrumbs} />
       <div className={styles.actions}>
         {actions}
         {actions && <NavToolbarSeparator />}
@@ -54,6 +54,9 @@ export function NavToolbar({
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
+    breadcrumbs: css({
+      maxWidth: '50%',
+    }),
     pageToolbar: css({
       height: TOP_BAR_LEVEL_HEIGHT,
       display: 'flex',
diff --git a/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx b/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx
index 0a5f9b4a6ff..7114b3083ad 100644
--- a/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx
+++ b/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx
@@ -39,8 +39,9 @@ const getStyles = (theme: GrafanaTheme2) => {
 
   return {
     breadcrumb: css({
-      alignItems: 'center',
-      display: 'flex',
+      display: 'block',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
       padding: theme.spacing(0, 0.5),
       whiteSpace: 'nowrap',
     }),
@@ -53,7 +54,10 @@ const getStyles = (theme: GrafanaTheme2) => {
       alignItems: 'center',
       color: theme.colors.text.primary,
       display: 'flex',
+      flex: 1,
       fontWeight: theme.typography.fontWeightMedium,
+      minWidth: 0,
+      maxWidth: 'max-content',
 
       // logic for small screens
       // hide any breadcrumbs that aren't the second to last child (the parent)
diff --git a/public/app/core/components/Breadcrumbs/Breadcrumbs.tsx b/public/app/core/components/Breadcrumbs/Breadcrumbs.tsx
index c08a1d67d27..0bb94e3f879 100644
--- a/public/app/core/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/public/app/core/components/Breadcrumbs/Breadcrumbs.tsx
@@ -9,13 +9,14 @@ import { Breadcrumb } from './types';
 
 export interface Props {
   breadcrumbs: Breadcrumb[];
+  className?: string;
 }
 
-export function Breadcrumbs({ breadcrumbs }: Props) {
+export function Breadcrumbs({ breadcrumbs, className }: Props) {
   const styles = useStyles2(getStyles);
 
   return (
-    <nav aria-label="Breadcrumbs">
+    <nav aria-label="Breadcrumbs" className={className}>
       <ol className={styles.breadcrumbs}>
         {breadcrumbs.map((breadcrumb, index) => (
           <BreadcrumbItem {...breadcrumb} isCurrent={index === breadcrumbs.length - 1} key={index} />