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

jouni · vursen · web-flow · commit 9af92997dcc0 · 2025-10-06T14:26:49.000+03:00
* fix: dialog base styles max-width

* fix unit tests

---------

Co-authored-by: Sergey Vinogradov &lt;mr.vursen@gmail.com&gt;
diff --git a/packages/dialog/src/styles/vaadin-dialog-overlay-base-styles.js b/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%;
   }
 
diff --git a/packages/dialog/test/dialog.test.js b/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 () => {
diff --git a/packages/dialog/test/draggable-resizable.test.js b/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%)']);
   });
 });
 
