The behavior of floating labels seems to be causing issues for me. When I hover over them, the label either disappears completely, gets cut off at the bottom, or at times even at the top. I've tried adjusting z-index and overflow visibility within the mat-form-field but without any success.
https://i.sstatic.net/2ybsq.png https://i.sstatic.net/MhCRL.png https://i.sstatic.net/O5kyy.png
Even on StackBlitz, I couldn't recreate the issue exactly. I managed to reproduce one case where the label is cut off at the top due to lack of padding above the form field element. But in my code, there's sufficient top padding which should prevent this issue. Since the label gets cut off at the bottom or disappears completely, it doesn't seem like the parent element padding is the root cause.
https://i.sstatic.net/03SIZ.png
Here's the code for a standard mat-form-field:
<mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>Data Source</mat-label>
<mat-select [(value)]="source">
<mat-option [value]="option" *ngFor="let option of sources">
{{ option.label }}
</mat-option>
</mat-select>
</mat-form-field>
There is no additional styling on the form field itself. The form field's parent div has a grid layout applied to its children, but similar problems occur with another component where the form field is placed within a flex layout too.