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

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