bug(form-field): mat-label overlap mat-suffix

[RedHeadEmile]

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

15.x

Description

When the mat-label is too long, it overlap the mat-suffix of the mat-form-field.

Reproduction

• Create a mat-form-field
• Place a mat-suffix inside of it
• Place a long mat-label inside of it

Expected Behavior

Actual Behavior

Environment

• Angular: 17.x
• CDK/Material: Material
• Browsers: Firefox & Google Chrome
• Windows

[mmalerba]

Here's a repro for this bug: https://stackblitz.com/edit/amxngc?file=src%2Fexample%2Fform-field-appearance-example.html

[OlivierPerceboisGarve]

The issue also exist with text prefix. mat-select works fine in this respect it uses a max-width: calc(100% - 60px); That is relatively easy to port to icon prefix, icon suffix, error icon (and combination of those). But for text prefix, text suffix it is going to be a bit more difficult since their width depends on their content.

[cstichlberger]

Still seeing this in Angular 19 - it's particularly pesky with text in the mat-suffix as the overlapping texts are pretty unreadable

[simonbauer-gepardec]

I'm experiencing this issue with @angular/material@19.1.4 as well.

[mistrykaran91]

Hi! Is anybody working on it? Otherwise, I could try to fix it if you don't mind.

[OlivierPerceboisGarve]

Hi mistrykaran91,

we did a partial fix in our framework, inspired by the material code for mat-select. The following code should get you started:
It fixes the situation for short suffixes, but fixing long suffixes would imo imply some js logic.

`

&.mat-mdc-form-field-has-icon-prefix.mat-mdc-form-field-has-icon-suffix
	.mdc-notched-outline
	.mdc-notched-outline__notch {
	max-width: calc(100% - 90px);
}

&:has(.mat-mdc-form-field-text-prefix):has(.mat-mdc-form-field-text-suffix)
	.mdc-notched-outline
	.mdc-notched-outline__notch {
	max-width: calc(100% - 80px);
}

&:has(.mat-mdc-form-field-text-suffix).mat-form-field-invalid
	.mdc-notched-outline
	.mdc-notched-outline__notch {
	max-width: calc(100% - 80px);
}

&:has(.mat-mdc-form-field-text-prefix):has(
		.mat-mdc-form-field-text-suffix
	).mat-form-field-invalid {
	.mdc-notched-outline .mdc-notched-outline__notch {
		max-width: calc(100% - 110px);
	}
}`

[mistrykaran91]

@OlivierPerceboisGarve : I think we have to skip this one as mentioned here by @crisbeto it might break lot of internal apps.
#30716 (comment)