fix: dialog base styles max-width (#10285)

* fix: dialog base styles max-width

* fix unit tests

---------

Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>

Author: jouni

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

@@ -37,7 +37,7 @@ export const dialogOverlayBase = css`
     border-radius: var(--vaadin-dialog-border-radius, var(--vaadin-radius-l));
     width: max-content;
     min-width: min(var(--vaadin-dialog-min-width, 4em), 100%);
-    max-width: var(--vaadin-dialog-max-width, 100%);
+    max-width: min(var(--vaadin-dialog-max-width, 100%), 100%);
     max-height: 100%;
   }
 

packages/dialog/test/dialog.test.js

@@ -354,7 +354,7 @@ describe('vaadin-dialog', () => {
       dialog.height = 400;
       await nextRender();
       expect(getComputedStyle(overlay.$.overlay).position).to.equal('relative');
-      expect(getComputedStyle(overlay.$.overlay).maxWidth).to.equal('100%');
+      expect(getComputedStyle(overlay.$.overlay).maxWidth).to.be.oneOf(['100%', 'min(100%, 100%)']);
     });
 
     it('should reset overlay width when set to null', async () => {

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

@@ -628,7 +628,7 @@ describe('draggable', () => {
   it('should not set overlay max-width to none on drag', async () => {
     drag(container);
     await nextRender();
-    expect(getComputedStyle(dialog.$.overlay.$.overlay).maxWidth).to.equal('100%');
+    expect(getComputedStyle(dialog.$.overlay.$.overlay).maxWidth).to.be.oneOf(['100%', 'min(100%, 100%)']);
   });
 });