bug(mat-dialog): mat-dialog-title adds a space in front of the header text when HTML is formatted

[fikkatra]

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

14

Description

When using a header tag as a mat-dialog-title, there is a space at the beginning of the title, resulting in the dialog title not being aligned with the content:

This only happens if the content of the header tag in the HTML file is placed on a new line.

When using a header tag that contains a long expression, the default formatting (by Prettier, for example) puts the content of the header tag on the next line (as header tags are block elements), like so:

<h2 mat-dialog-title>
  {{ getTitleThisFunctionHasAVeryLongNameSoPrettierPutsItOnANewLine() }}
</h2>

This results in a space being inserted in the HTML. However, since the browser ignores whitespace at the beginning of the element, the space is not visible (cf. HTML spec).

Sinde Material 15 however, elements containing mat-dialog-title have a ::before element. This element causes the browser to render the whitespace, which is inconsistent with default browser behavior and default formatting for block elements.

Reproduction

Steps to reproduce:

1. Create a mat-dialog
2. Add a header tag with mat-dialog-title
3. As a header text, insert an expression that is quite long, causing Prettier to put it on the next line

The problem is illustrated in this Stackblitz.

Removing the ::before element of the mat-dialog-title, removes the whitespace, but causes the header height to be too small.

Expected Behavior

No whitespace should be visible, according to default behavior of both the browser and block element formatting.

Actual Behavior

Whitespace is visible at the beginning of the title.

Environment

• Angular: 15.1
• CDK/Material: 15.1.2
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS Ventura

[crisbeto]

It's because MDC uses ::before to set the height of the header. I spent some time looking into it before, but the only viable approach seemed to be trimming the text of the dialog.

[01Vladimir10]

this fixed it for me:

.mdc-dialog__title {
  display: flex !important;
  align-items: baseline !important;
}

[Saurabh4626]

.mdc-dialog__title::before { display: none !important; }

[matrium0]

This is bothering me as well. Especially since you can get burned very easily when overwriting internal angular material classes like this. No guarantee that this won't break on their next major release. We all have been there, that's why the mood towards Angular Material seems to be a bit salty on Reddit nowadays.

I wonder what the reason to implement spacing like that even is? Pretty sure there is one, but I don't really get it. Why not use just padding/margins with a variable, so we can easily modify that without "!important" or some css selector hack to trump the default.

Or I guess at least a variable for the height maybe?

[fhljys]

Same here. Can we get this fixed?