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

### 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

Beginne mit der StackBlitz-Reproduktion unter src/example/form-field-appearance-example.html und reproduziere das Problem mit einer sehr großen Browser-Schriftgröße in Chrome oder Edge. Verfolge das Layout von mat-hint und mat-error rund um die Eingabefelder. Fertig ist es, wenn ihr Text den Feldern zugeordnet bleibt, ohne Inhalte in der Nähe zu überlagern oder unleserlich zu werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.