bug(MatDatePicker): Datepicker label overflows over Icon

### 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

14.2.7

### Description

Currently updating from v. 14.2.7 to 16.2.7 (16.2.8 on stackblitz), and I noticed that the date picker isn't handling long labels correctly. Instead of showing an ellipsis, it's overflowing to behind the calendar icon. See examples below:

**Version 16.2.8 (bad):** https://stackblitz.com/edit/8enoqa?file=src%2Fexample%2Fdatepicker-overview-example.html

**Version 14.2.7 (good):** https://stackblitz.com/edit/c2yh3u?file=src%2Fapp%2Fdatepicker-overview-example.html

**Note:** Version 15.2.9 is also showing an incorrect label.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/8enoqa?file=src%2Fexample%2Fdatepicker-overview-example.html
Steps to reproduce:
1. Wrap a datepicker in a div with a set width.
2. Set mat-form-field width to 100% of the parent width.
3. Set label to be longer than available space.
4. Observe label filling entire input, including icon space, instead of overflowing with ellipsis

### Expected Behavior

The label should fit in the allotted space and not show behind the calendar icon.


### Actual Behavior

The datepicker label is filling the entire input, behind the calendar icon.


### Environment

- Angular: 16.2.7 / 16.2.8 (stackblitz)
- CDK/Material: 16.2.7
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Commencez par la reproduction StackBlitz liée et comparez les exemples de datepicker pour les versions 14.2.7 et 16.2.8, puis suivez les styles du libellé de champ de formulaire datepicker et de l’icône de calendrier. C’est terminé lorsqu’un libellé long reste dans l’espace disponible et affiche des points de suspension sans apparaître derrière l’icône.

Rédigé par le modèle d'indexation à partir du texte de l'issue.