From 15e19cef9535031d1b6dd1554bc20036df81d265 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 25 Aug 2022 16:21:29 +0100
Subject: [PATCH] Navigation: improve page toolbar responsiveness (#54223)

* improve page toolbar responsiveness

* rename emotion style to be more descriptive

* remove unnecessary max-width
---
 .../src/components/PageLayout/PageToolbar.tsx | 22 ++++++++++++-------
 .../ToolbarButton/ToolbarButtonRow.tsx        |  1 +
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
index 44c760a6f95..28fe0b9a307 100644
--- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
@@ -62,7 +62,7 @@ export const PageToolbar: FC<Props> = React.memo(
 
     const titleEl = (
       <>
-        <span className={styles.noLinkTitle}>{title}</span>
+        <span className={styles.truncateText}>{title}</span>
         {section && <span className={styles.pre}> / {section}</span>}
       </>
     );
@@ -92,13 +92,13 @@ export const PageToolbar: FC<Props> = React.memo(
               <>
                 <Link
                   aria-label={`Search dashboard in the ${parent} folder`}
-                  className={cx(styles.titleText, styles.parentLink, styles.titleLink)}
+                  className={cx(styles.titleText, styles.parentLink, styles.titleLink, styles.truncateText)}
                   href={parentHref}
                 >
                   {parent} <span className={styles.parentIcon}></span>
                 </Link>
                 {titleHref && (
-                  <span className={cx(styles.titleText, styles.titleDivider, styles.parentLink)} aria-hidden>
+                  <span className={cx(styles.titleText, styles.titleDivider)} aria-hidden>
                     /
                   </span>
                 )}
@@ -160,6 +160,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     leftWrapper: css`
       display: flex;
       flex-wrap: nowrap;
+      max-width: 70%;
     `,
     pageIcon: css`
       display: none;
@@ -169,27 +170,26 @@ const getStyles = (theme: GrafanaTheme2) => {
         align-items: center;
       }
     `,
-    noLinkTitle: css`
+    truncateText: css`
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     `,
     titleWrapper: css`
       display: flex;
-      flex-grow: 1;
       margin: 0;
+      min-width: 0;
     `,
     navElement: css`
       display: flex;
       align-items: center;
-      max-width: calc(100vw - 78px);
+      min-width: 0;
     `,
     h1Styles: css`
       margin: 0;
       line-height: inherit;
-      width: 300px;
-      max-width: min-content;
       flex-grow: 1;
+      min-width: 0;
     `,
     parentIcon: css`
       margin-left: ${theme.spacing(0.5)};
@@ -198,6 +198,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: flex;
       font-size: ${typography.size.lg};
       margin: 0;
+      max-width: 300px;
       border-radius: 2px;
     `,
     titleLink: css`
@@ -207,11 +208,16 @@ const getStyles = (theme: GrafanaTheme2) => {
     `,
     titleDivider: css`
       padding: ${spacing(0, 0.5, 0, 0.5)};
+      display: none;
+      ${theme.breakpoints.up('md')} {
+        display: unset;
+      }
     `,
     parentLink: css`
       display: none;
       ${theme.breakpoints.up('md')} {
         display: unset;
+        flex: 1;
       }
     `,
     leftActionItem: css`
diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
index 59984a96099..693c243dcd2 100644
--- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
+++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
@@ -128,5 +128,6 @@ const getStyles = (theme: GrafanaTheme2, overflowButtonOrder: number, alignment:
   childWrapper: css`
     align-items: center;
     display: flex;
+    gap: ${theme.spacing(1)};
   `,
 });