improve responsiveness of breadcrumbs (#55572)

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

public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -39,8 +39,9 @@ const getStyles = (theme: GrafanaTheme2) => {
 
   return {
     breadcrumb: css({
-      alignItems: 'center',
+      display: 'block',
-      display: 'flex',
+      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)

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} />