bug(mat-hint & mat-error): Font scaling breaks layout of mat-hint and validation messages

[nietoperze]

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 font scaling is increased (e.g. via browser/system settings), mat-hint and validation messages (mat-error) for input fields overflow into the next content block, breaking layout and readability.

Reproduction

StackBlitz link: https://stackblitz.com/edit/vjrf1ddz?file=src%2Fexample%2Fform-field-appearance-example.html
Steps to reproduce:

1. Increase font size in browser settings to very big.
2. Observe how hint and error messages overlap or push into adjacent content.

Expected Behavior

• Hint and error messages should remain visually associated with their input fields.
• Layout should adapt to font scaling without breaking structure.

Actual Behavior

• Text overflows or overlaps with unrelated content.
• Layout becomes confusing or unreadable.

Environment

• Angular: 20.0.3
• CDK/Material: 20.0.3
• Browser(s): Microsoft Edge, Google Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[nietoperze]

This is an accessibility issue, as users who rely on larger font sizes — for example, due to visual impairments — are disproportionately affected. The layout becomes confusing or unreadable, which violates accessibility principles and WCAG guidelines.