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

リンクされている StackBlitz の再現例から始め、バージョン 14.2.7 と 16.2.8 の datepicker の例を比較してから、datepicker のフォームフィールドラベルとカレンダーアイコンのスタイルを追跡します。長いラベルが利用可能な領域内に収まり、アイコンの背後に表示されることなく省略記号を表示すれば完了です。

索引モデルが issue の本文から書いたものです。