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

Inizia dalla riproduzione collegata di StackBlitz e confronta gli esempi di datepicker per le versioni 14.2.7 e 16.2.8, quindi traccia gli stili dell’etichetta del campo del modulo datepicker e dell’icona del calendario. Il lavoro è completato quando un’etichetta lunga rimane nello spazio disponibile e visualizza i puntini di sospensione senza apparire dietro l’icona.

Scritto dal modello di indicizzazione a partire dal testo della issue.