MatDialog ist not centered if width is set to 100% but maxWidth is lower

[dardanbujupaj]

Reproduction

StackBlitz: https://stackblitz.com/edit/components-issue-nvo6ox

Steps to reproduce:

1. Open a component as a MatDialog using following configuration
   { width: '100%', maxWidth: '400px' }
2. Adjust the window width, so that exceeds the dialog-maxWidth of 400px

Expected Behavior

What behavior were you expecting to see?

• The dialog grows up to its max width of 400px
• As soon as the maxWidth is hit, the dialog stays the same width and is centered on the window

Actual Behavior

What behavior did you actually see?

• The dialog is positioned as expected if the width is configured to 99% or lower
• The dialog is aligned to the left of the window if the width configured to 100%
• see StackBlitz link above

Environment

• Angular: 8.2.14
• CDK/Material: 8.2.3
• Browser(s): Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Linux

[dardanbujupaj]

My guess is that the following code:

components/src/cdk/overlay/position/global-position-strategy.ts

Line 174 in ab0f30d

if (config.width === '100%') {

was written before maxWidth was supported by MatDialog.

Also I don't really understand why justifyContent shouldn't be center when width is set to 100%.

[crisbeto]

You're right that we shouldn't be doing this when there's a maxWidth and that it was probably introduced before we had a maxWidth option in the first place. We used to have a comment there with the reasoning, but it looks like it was removed as the file was changing over time. I can't dig up the PR that introduced it, but here's the oldest version of the file I could find that still has the comment: https://github.com/jelbourn/components/blob/eb1293cba047d0ac310d216ac310ae16f5104e4c/src/cdk/overlay/position/global-position-strategy.ts#L84. I'll submit a fix.