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

Comienza con la reproducción vinculada de StackBlitz y compara los ejemplos de datepicker para las versiones 14.2.7 y 16.2.8; después, sigue los estilos de la etiqueta del campo de formulario de datepicker y del icono de calendario. Se considera terminado cuando una etiqueta larga permanece dentro del espacio disponible y muestra puntos suspensivos sin aparecer detrás del icono.

Escrito por el modelo de indexación a partir del texto del issue.