Validation hint overlaps next input in q-form

[michaelprys]

What happened?

When using q-form with q-input, the validation hint (or error message) appears below the input but doesn't push the following elements down. Instead, it overlaps the next input, making the layout break visually. This behavior seems to be caused by the hint being positioned absolutely. I want the inputs to be close to each other. The validation hint should dynamically adjust the layout, pushing the next input downward when it appears. It shouldn't require developers to manually add extra spacing between inputs to "prepare" for possible validation messages. Everything should be adaptive by default.

The only solution I came up with after inspecting the code is by making a reset for these 2 classes:

:deep(.q-field__bottom--animated) {
    transform: translateY(0%);
    position: static;
    padding-bottom: 1rem;
}
:deep(.q-field--with-bottom) {
    padding-bottom: 0;
}

Is it possible to fix this, or was it designed this way on purpose (if so, why)?

What did you expect to happen?

I used q-form with two inputs and triggered the validation error.

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-vzpxcz8x?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

1. use q-form component https://quasar.dev/vue-components/form#qform-api
2. set up a validation rule and try to trigger the error

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Style & Identity (quasar), Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), Components (quasar)

Platforms/Browsers

Firefox, Chrome, Safari, Microsoft Edge, iOS, Android, Electron, Other

Quasar info output

Relevant log output

Additional context

No response