bug(grid-list): mat-form-field is clipped inside mat-grid-tile when browser zoom increases

[DUGELO]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When a basic mat-form-field is placed inside a mat-grid-tile, increasing the browser zoom
(e.g. 125%, 150%, 175%) causes the mat-form-field to grow, but the tile keeps the same
computed bounds. As a result, the form field outline gets clipped.

This makes mat-grid-list unreliable for simple form layouts using Angular Material components.

Reproduction

1. Create a mat-grid-list with one or more mat-grid-tile items.
2. Place a standard mat-form-field with matInput inside a tile.
3. Open the page in the browser.
4. Increase browser zoom to 125% or more.

Reproduction

Reproduction

1. Create a mat-grid-list with one or more mat-grid-tile items.
2. Place a standard mat-form-field with matInput inside a tile.
3. Open the page in the browser.
4. Increase browser zoom to 125% or more.

Expected Behavior

Expected behavior

The mat-grid-tile should accommodate the rendered size of the Material form field,
or the documentation should clearly state that mat-grid-list is not intended for form layouts
with dynamic-height controls like mat-form-field.

Actual Behavior

Current behavior

The mat-form-field expands visually, but the tile does not adapt its size accordingly.
The field border/outline is cut off by the tile bounds.

Environment

Angular: 21.x
Angular Material: 21.x
Browser: Chrome
OS: Windows

[DUGELO]

Hello, here's an example of the error:

The mat-form-field apparently grows with zoom, but the grid-tile doesn't follow suit, causing this broken display.

It would be helpful if the mat-grid were responsive in these cases.