Dashboard: Adjust styles for very long titles (#52452)

packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx

@@ -15,6 +15,7 @@ import { IconButton } from '../IconButton/IconButton';
 export interface Props {
   pageIcon?: IconName;
   title?: string;
+  section?: string;
   parent?: string;
   onGoBack?: () => void;
   titleHref?: string;
@@ -30,6 +31,7 @@ export interface Props {
 export const PageToolbar: FC<Props> = React.memo(
   ({
     title,
+    section,
     parent,
     pageIcon,
     onGoBack,
@@ -59,8 +61,22 @@ export const PageToolbar: FC<Props> = React.memo(
       className
     );
 
+    const leftItemChildren = leftItems?.map((child, index) => (
+      <div className={styles.leftActionItem} key={index}>
+        {child}
+      </div>
+    ));
+
+    const titleEl = (
+      <>
+        <span className={styles.noLinkTitle}>{title}</span>
+        {section && <span className={styles.pre}> / {section}</span>}
+      </>
+    );
+
     return (
       <nav className={mainStyle} aria-label={ariaLabel}>
+        <div className={styles.leftWrapper}>
           {pageIcon && !onGoBack && (
             <div className={styles.pageIcon}>
               <Icon name={pageIcon} size="lg" aria-hidden />
@@ -96,26 +112,26 @@ export const PageToolbar: FC<Props> = React.memo(
               </>
             )}
 
-          {title && titleHref && (
+            {title && (
+              <div className={styles.titleWrapper}>
                 <h1 className={styles.h1Styles}>
+                  {titleHref ? (
                     <Link
                       aria-label="Search dashboard by name"
                       className={cx(styles.titleText, styles.titleLink)}
                       href={titleHref}
                     >
-                {title}
+                      {titleEl}
                     </Link>
-            </h1>
+                  ) : (
+                    <div className={styles.titleText}>{titleEl}</div>
                   )}
-          {title && !titleHref && <h1 className={styles.titleText}>{title}</h1>}
+                </h1>
-        </nav>
+                {leftItemChildren}
-        {leftItems?.map((child, index) => (
+              </div>
-          <div className={styles.leftActionItem} key={index}>
+            )}
-            {child}
+          </nav>
         </div>
-        ))}
-
-        <div className={styles.spacer} />
         {React.Children.toArray(children)
           .filter(Boolean)
           .map((child, index) => {
@@ -136,21 +152,11 @@ const getStyles = (theme: GrafanaTheme2) => {
   const { spacing, typography } = theme;
 
   const focusStyle = getFocusStyles(theme);
-  const titleStyles = css`
-    font-size: ${typography.size.lg};
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    margin: 0;
-    max-width: 240px;
-    border-radius: 2px;
-
-    @media ${styleMixins.mediaUp(theme.v1.breakpoints.xl)} {
-      max-width: unset;
-    }
-  `;
 
   return {
+    pre: css`
+      white-space: pre;
+    `,
     toolbar: css`
       align-items: center;
       background: ${theme.colors.background.canvas};
@@ -159,7 +165,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       justify-content: flex-end;
       padding: ${theme.spacing(1.5, 2)};
     `,
-    spacer: css`
+    leftWrapper: css`
+      display: flex;
+      flex-wrap: nowrap;
       flex-grow: 1;
     `,
     pageIcon: css`
@@ -170,24 +178,38 @@ const getStyles = (theme: GrafanaTheme2) => {
         align-items: center;
       }
     `,
+    noLinkTitle: css`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
     titleWrapper: css`
       display: flex;
-      align-items: center;
+      flex-grow: 1;
-      min-width: 0;
+      margin: 0;
-      overflow: hidden;
     `,
     navElement: css`
       display: flex;
+      flex-grow: 1;
+      align-items: center;
+      max-width: calc(100vw - 78px);
     `,
     h1Styles: css`
       margin: 0;
       line-height: inherit;
-      display: flex;
+      width: 300px;
+      max-width: min-content;
+      flex-grow: 1;
     `,
     parentIcon: css`
       margin-left: ${theme.spacing(0.5)};
     `,
-    titleText: titleStyles,
+    titleText: css`
+      display: flex;
+      font-size: ${typography.size.lg};
+      margin: 0;
+      border-radius: 2px;
+    `,
     titleLink: css`
       &:focus-visible {
         ${focusStyle}

public/app/features/dashboard/components/DashboardSettings/DashboardSettings.test.tsx

@@ -42,7 +42,11 @@ describe('DashboardSettings', () => {
       </Provider>
     );
 
-    expect(screen.getByText('Foo / Settings')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        (_, el) => el?.tagName.toLowerCase() === 'h1' && /Foo\s*\/\s*Settings/.test(el?.textContent ?? '')
+      )
+    ).toBeInTheDocument();
 
     await userEvent.keyboard('{Escape}');
 

public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx

@@ -163,7 +163,13 @@ export function DashboardSettings({ dashboard, editview }: Props) {
   return (
     <FocusScope contain autoFocus>
       <div className="dashboard-settings" ref={ref} {...overlayProps} {...dialogProps}>
-        <PageToolbar title={`${dashboard.title} / Settings`} parent={folderTitle} onGoBack={onClose} />
+        <PageToolbar
+          className={styles.toolbar}
+          title={dashboard.title}
+          section="Settings"
+          parent={folderTitle}
+          onGoBack={onClose}
+        />
         <CustomScrollbar>
           <div className={styles.scrollInner}>
             <div className={styles.settingsWrapper}>
@@ -200,6 +206,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
     min-width: 100%;
     display: flex;
   `,
+  toolbar: css`
+    width: 60vw;
+    min-width: min-content;
+  `,
   settingsWrapper: css`
     margin: ${theme.spacing(0, 2, 2)};
     display: flex;

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -443,7 +443,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
 
     return (
       <div className={styles.wrapper} aria-label={selectors.components.PanelEditor.General.content}>
-        <PageToolbar title={`${dashboard.title} / Edit Panel`} onGoBack={this.onGoBackToDashboard}>
+        <PageToolbar title={dashboard.title} section="Edit Panel" onGoBack={this.onGoBackToDashboard}>
           {this.renderEditorActions()}
         </PageToolbar>
         <div className={styles.verticalSplitPanesWrapper}>