fix: do not wrap header content, wrap long title (#4310) (#4325)

packages/dialog/src/vaadin-dialog.js

@@ -26,13 +26,21 @@ registerStyles(
       z-index: 1;
     }
 
+    [part='header'] {
+      flex-wrap: nowrap;
+    }
+
     ::slotted([slot='header-content']),
     ::slotted([slot='title']),
     ::slotted([slot='footer']) {
       display: contents;
       pointer-events: auto;
     }
 
+    ::slotted([slot='title']) {
+      overflow-wrap: anywhere;
+    }
+
     [part='header-content'] {
       flex: 1;
     }

packages/dialog/test/visual/lumo/dialog.test.js

@@ -51,4 +51,18 @@ describe('dialog', () => {
     element.footerRenderer = createRenderer('Footer');
     await visualDiff(div, 'header-footer-renderer');
   });
+
+  it('long title and header renderer', async () => {
+    element.$.overlay.style.maxWidth = '20rem';
+    element.headerTitle = 'Long title that wraps in multiple lines';
+    element.headerRenderer = createRenderer('Header');
+    await visualDiff(div, 'header-title-multiple-lines');
+  });
+
+  it('long single word title and header renderer', async () => {
+    element.$.overlay.style.maxWidth = '20rem';
+    element.headerTitle = 'InternationalizationConfigurationHelper';
+    element.headerRenderer = createRenderer('Header');
+    await visualDiff(div, 'header-title-long-single-word');
+  });
 });

packages/dialog/test/visual/material/dialog.test.js

@@ -51,4 +51,18 @@ describe('dialog', () => {
     element.footerRenderer = createRenderer('Footer');
     await visualDiff(div, 'header-footer-renderer');
   });
+
+  it('long title and header renderer', async () => {
+    element.$.overlay.style.maxWidth = '20rem';
+    element.headerTitle = 'Long title that wraps in multiple lines';
+    element.headerRenderer = createRenderer('Header');
+    await visualDiff(div, 'header-title-multiple-lines');
+  });
+
+  it('long single word title and header renderer', async () => {
+    element.$.overlay.style.maxWidth = '20rem';
+    element.headerTitle = 'InternationalizationConfigurationHelper';
+    element.headerRenderer = createRenderer('Header');
+    await visualDiff(div, 'header-title-long-single-word');
+  });
 });