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

Start with the linked StackBlitz reproduction and compare the datepicker examples for versions 14.2.7 and 16.2.8, then trace the datepicker form-field label and calendar-icon styles. Done means a long label remains within the available space and displays an ellipsis without appearing behind the icon.

Written by the indexing model from the issue text.