From 78995e252a880979f8cdbc549935c8eac477d657 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 19 Aug 2022 09:17:52 +0100
Subject: [PATCH] implement responsive breadcrumb behaviour (#53764)

---
 .../components/Breadcrumbs/BreadcrumbItem.tsx | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx b/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx
index 7b41f9cccbe..61a0f084e88 100644
--- a/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx
+++ b/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx
@@ -44,6 +44,10 @@ export function BreadcrumbItem(props: Props) {
 }
 
 const getStyles = (theme: GrafanaTheme2) => {
+  const separator = css({
+    color: theme.colors.text.secondary,
+  });
+
   return {
     breadcrumb: css({
       alignItems: 'center',
@@ -61,9 +65,21 @@ const getStyles = (theme: GrafanaTheme2) => {
       color: theme.colors.text.primary,
       display: 'flex',
       fontWeight: theme.typography.fontWeightMedium,
+
+      // logic for small screens
+      // hide any breadcrumbs that aren't the second to last child (the parent)
+      [theme.breakpoints.down('md')]: {
+        display: 'none',
+        '&:nth-last-child(2)': {
+          display: 'flex',
+          flexDirection: 'row-reverse',
+
+          [`.${separator}`]: {
+            transform: 'rotate(180deg)',
+          },
+        },
+      },
     }),
-    separator: css({
-      color: theme.colors.text.secondary,
-    }),
+    separator,
   };
 };