Breadcrumbs: Improve responsiveness (#67955)

* Breadcrumbs: Improve responsiveness

* More tweaks and fixes

* more adapative logic

* reduce min-width on mobile

public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx

@@ -48,7 +48,7 @@ export function NavToolbar({
           onClick={onToggleMegaMenu}
         />
       </div>
-      <Breadcrumbs breadcrumbs={breadcrumbs} className={styles.breadcrumbs} />
+      <Breadcrumbs breadcrumbs={breadcrumbs} className={styles.breadcrumbsWrapper} />
       <div className={styles.actions}>
         {actions}
         {actions && <NavToolbarSeparator />}
@@ -74,8 +74,12 @@ export function NavToolbar({
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    breadcrumbs: css({
-      maxWidth: '50%',
+    breadcrumbsWrapper: css({
+      display: 'flex',
+      overflow: 'hidden',
+      [theme.breakpoints.down('sm')]: {
+        minWidth: '50%',
+      },
     }),
     pageToolbar: css({
       height: TOP_BAR_LEVEL_HEIGHT,

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

@@ -10,9 +10,11 @@ import { Breadcrumb } from './types';
 
 type Props = Breadcrumb & {
   isCurrent: boolean;
+  index: number;
+  flexGrow: number;
 };
 
-export function BreadcrumbItem({ href, isCurrent, text }: Props) {
+export function BreadcrumbItem({ href, isCurrent, text, index, flexGrow }: Props) {
   const styles = useStyles2(getStyles);
 
   const onBreadcrumbClick = () => {
@@ -20,9 +22,14 @@ export function BreadcrumbItem({ href, isCurrent, text }: Props) {
   };
 
   return (
-    <li className={styles.breadcrumbWrapper}>
+    <li className={styles.breadcrumbWrapper} style={{ flexGrow }}>
       {isCurrent ? (
-        <span data-testid={Components.Breadcrumbs.breadcrumb(text)} className={styles.breadcrumb} aria-current="page">
+        <span
+          data-testid={Components.Breadcrumbs.breadcrumb(text)}
+          className={styles.breadcrumb}
+          aria-current="page"
+          title={text}
+        >
           {text}
         </span>
       ) : (
@@ -31,6 +38,7 @@ export function BreadcrumbItem({ href, isCurrent, text }: Props) {
             onClick={onBreadcrumbClick}
             data-testid={Components.Breadcrumbs.breadcrumb(text)}
             className={cx(styles.breadcrumb, styles.breadcrumbLink)}
+            title={text}
             href={href}
           >
             {text}
@@ -45,10 +53,6 @@ export function BreadcrumbItem({ href, isCurrent, text }: Props) {
 }
 
 const getStyles = (theme: GrafanaTheme2) => {
-  const separator = css({
-    color: theme.colors.text.secondary,
-  });
-
   return {
     breadcrumb: css({
       display: 'block',
@@ -75,25 +79,19 @@ const getStyles = (theme: GrafanaTheme2) => {
       // logic for small screens
       // hide any breadcrumbs that aren't the second to last child (the parent)
       // unless there's only one breadcrumb, in which case we show it
-      [theme.breakpoints.down('md')]: {
+      [theme.breakpoints.down('sm')]: {
         display: 'none',
         '&:nth-last-child(2)': {
           display: 'flex',
-          flexDirection: 'row-reverse',
-
-          [`.${separator}`]: {
-            transform: 'rotate(180deg)',
-          },
+          minWidth: '40px',
         },
-        '&:first-child&:last-child': {
+        '&:last-child': {
           display: 'flex',
-
-          [`.${separator}`]: {
-            display: 'none',
-          },
         },
       },
     }),
-    separator,
+    separator: css({
+      color: theme.colors.text.secondary,
+    }),
   };
 };

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

@@ -19,19 +19,38 @@ export function Breadcrumbs({ breadcrumbs, className }: Props) {
     <nav aria-label="Breadcrumbs" className={className}>
       <ol className={styles.breadcrumbs}>
         {breadcrumbs.map((breadcrumb, index) => (
-          <BreadcrumbItem {...breadcrumb} isCurrent={index === breadcrumbs.length - 1} key={index} />
+          <BreadcrumbItem
+            {...breadcrumb}
+            isCurrent={index === breadcrumbs.length - 1}
+            key={index}
+            index={index}
+            flexGrow={getFlexGrow(index, breadcrumbs.length)}
+          />
         ))}
       </ol>
     </nav>
   );
 }
 
+function getFlexGrow(index: number, length: number) {
+  if (length < 5 && index > 0 && index < length - 2) {
+    return 4;
+  }
+
+  if (length > 6 && index > 1 && index < length - 3) {
+    return 4;
+  }
+
+  return 10;
+}
+
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     breadcrumbs: css({
       display: 'flex',
       alignItems: 'center',
       flexWrap: 'nowrap',
+      overflow: 'hidden',
     }),
   };
 };