fix: prevent dialog from shrinking on the right edge (#10400) (#10401)

Co-authored-by: Ugur Saglam <106508695+ugur-vaadin@users.noreply.github.com>
Co-authored-by: web-padawan <iamkulykov@gmail.com>

Author: 3 people

packages/dialog/src/vaadin-dialog-styles.js

@@ -91,6 +91,7 @@ export const resizableOverlay = css`
     overflow: visible;
     max-height: 100%;
     display: flex;
+    width: max-content;
   }
 
   [part='content'] {

packages/dialog/test/draggable-resizable.test.js

@@ -584,6 +584,20 @@ describe('draggable', () => {
     expect(Math.floor(draggedBounds.height)).to.be.eql(Math.floor(bounds.height));
   });
 
+  it('should not shrink dialog when dragged to the right edge', async () => {
+    dialog.renderer = (root) => {
+      root.innerHTML = `<div style="padding: 20px;">Lorem ipsum dolor sit amet</div>`;
+    };
+    await nextRender();
+    const initialWidth = container.offsetWidth;
+    const bounds = container.getBoundingClientRect();
+    const targetX = window.innerWidth - 100;
+    dx = targetX - Math.floor(bounds.left + bounds.width / 2);
+    drag(container);
+    await nextRender();
+    expect(container.offsetWidth).to.equal(initialWidth);
+  });
+
   it('should not reset scroll position on dragstart', async () => {
     dialog.modeless = true;
     button.style.marginBottom = '200px';

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

@@ -60,15 +60,17 @@ describe('dialog', () => {
   });
 
   it('long title and header renderer', async () => {
-    element.$.overlay.style.maxWidth = '20rem';
+    // Override default Material max-width: 560px
+    element.$.overlay.$.overlay.style.maxWidth = '20rem';
     element.headerTitle = 'Long title that wraps in multiple lines';
     element.headerRenderer = createRenderer('Header');
     await nextUpdate(element);
     await visualDiff(div, 'header-title-multiple-lines');
   });
 
   it('long single word title and header renderer', async () => {
-    element.$.overlay.style.maxWidth = '20rem';
+    // Override default Material max-width: 560px
+    element.$.overlay.$.overlay.style.maxWidth = '20rem';
     element.headerTitle = 'InternationalizationConfigurationHelper';
     element.headerRenderer = createRenderer('Header');
     await nextUpdate(element);