Form widget - layout shift when required input field shows the message "<name> is required"

[hotNipi]

Current Behavior

Carefully designed cards with same height

With message fired the layout of the card gets affected

Expected Behavior

The card layout should not be affected.

Steps To Reproduce

No steps but proposal:

Render the message with position absolute

The CSS

.nrdb-ui-form-rows .nrdb-ui-text-field{
    position: relative;
}
.nrdb-ui-form-rows .v-input__details{
    position: absolute;
    right: 1rem;
    bottom: -0.5rem;
    padding: unset;
}
.nrdb-ui-form-rows .v-messages__message{
    background-color: rgb(var(--v-theme-group-background)) ;
    display:inline;
    padding-inline: .25rem;
}

Tested with all form elements where "required" option is available
(with Chrome, FF & Edge)

Little bit of over-crowded when narrow card has form with 2-column layout. But still ,no layout shift.

Environment

• Dashboard version:
• Node-RED version:
• Node.js version:
• npm version:
• Platform/OS:
• Browser:

Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate