bug(mat-label): mat-label overlap control and does not show ellipsis

[Flo0806]

trafficstars

Is this a regression?

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

The previous version in which this bug was not present was

I'm not 100% sure, but it worked before

Description

The mat-label does not wrap the text with ellipsis anymore in the mat-datepicker. Instead the text goes over the icon/control itself.

<mat-form-field style="width: 200px;">
  <mat-label>To long to show all text</mat-label>
  <input
    matInput
    [matDatepicker]="dateLoan"
    readonly
    formControlName="dateFinalPaymentControl"
  />
  <mat-datepicker-toggle matSuffix [for]="dateLoan"></mat-datepicker-toggle>
  <mat-datepicker #dateLoan></mat-datepicker>
</mat-form-field>

Reproduction

Steps to reproduce:

1. Simple add create a mat-datepicker with a mat-label with new version 15.x

Stackblitz is available

Expected Behavior

Before the text was trimmed with ellipsis like this:

Actual Behavior

Now is go outside the control/over the icon:

Environment

• Angular: 15.0.4
• CDK/Material: 15.0.3
• Browser(s): (Chrome, Edge, Firefox)
• Operating System: MacOS

[ChristianKlima]

We have the same error with appearance="outlined".

[pschmid667]

What's the status of this? I see there's already an open MR to fix the issue

[daryakalenik]

same thing

[Laess3r]

This issue is still not fixed. The old Stackblitz above is still valid in Material 19