Angular Material "Form-Field" with appearance="outline" is cut off from other labels

Question

After updating to Angular Material v15 our form fields look like this (sometimes - depending on if there is a margin/padding from the element above):

This is how it looked like before:

From what I can see (and what they also write in the documentation) they changed the margins. Compare (new version):

vs previous version:

Also to proof that it's not only in our application I prepared a stackblitz sample that shows this behavior as well, see: Stackblitz example

I have fixed the label being "cut off" by adding a padding-top: 8px to all mat-form-fields. However, this feels like a workaround. Is there any better solution for this?

Answer 1

I got a better solution, in my case I am working with a <mat-grid-tile> and to resolve the issue I've just setted overflow: visible on the mat-grid-tile.
I'm getting an error trying to build the Stackblitz example that you shared but I guess that in your case you should add the overflow property on the <mat-form-field> container ; )