bug(MatDialog): alignment issue with width 100% (TS) & default max-width (CSS)

[poveu]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16

Description

When using MatDialog's open method with { width: 100% } and default max-width (set in the styles), the dialog is not centered (because .cdk-global-overlay-wrapper receives justify-content: flex-start).

This behavior seems to be caused by global-position-strategy file that contains shouldBeFlushHorizontally check that doesn't know that the dialog has max-width set in the CSS.

It works fine with, for example, maxWidth: '80vw' set in the open method's config (MatDialogConfig) OR if we open the dialog with { width: '99%' }.

It worked fine in v16.

Reproduction

StackBlitz link: https://stackblitz.com/edit/kmkyqc?file=src%2Fexample%2Fdialog-content-example-dialog.html

Steps to reproduce:

1. Open the dialog

Expected Behavior

In the case above, the dialog should be centered (shouldBeFlushHorizontally probably should take current/default dialog's styles to account (not only those set in open method's config)).

Actual Behavior

Dialog is aligned to start when its width is set to 100% in the open method's config, but it has applied a style with max-width.

Environment

• Angular: 17+
• CDK/Material: 17+

[crisbeto]

This is a valid issue that we can't do much about. The problem is that in M2 we didn't have a max-width whereas in M3 we do and we had to be able to set that purely through tokens. As you mentioned, the workaround is to set the maxWidth in the dialog config.