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

Bắt đầu với bản tái hiện trên StackBlitz tại src/example/form-field-appearance-example.html và tái hiện vấn đề bằng cách sử dụng cỡ phông chữ trình duyệt rất lớn trong Chrome hoặc Edge. Theo dõi bố cục của mat-hint và mat-error xung quanh các trường nhập; hoàn tất khi văn bản của chúng vẫn được liên kết với các trường mà không chồng lên nội dung liền kề hoặc trở nên không thể đọc được.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.