From 216987bb0c6be90ba915c475ab3ea09d78f8874a Mon Sep 17 00:00:00 2001 From: pigui Date: Mon, 31 Aug 2026 13:04:32 +0200 Subject: [PATCH] Group each error message with the field it belongs to On the deployed site "Falta el nombre" sat 0px below its own field and 6px above the *next* field's label, so the three lines read as one block and the message looked like a caption for "HORAS POR SEMANA". Material renders a field's message flush underneath it, so the space between rows has to be visibly larger than the space inside one. The form's row gap goes from 1.25rem to 2rem: 0px to its own field, 18px to the next label. Measured against https://pireon.dev before and after. The earlier fixes in this series are already live there and verified correct on the deployed build -- labels uppercase at weight 700, the checkbox message red at 12px on its own line, the textarea's ring at 20px, and no growth on submit. This one needs a redeploy to show. Co-Authored-By: Claude Opus 5 --- landing/src/app/ui/contact-form.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/landing/src/app/ui/contact-form.scss b/landing/src/app/ui/contact-form.scss index 9a1edab..33501a4 100644 --- a/landing/src/app/ui/contact-form.scss +++ b/landing/src/app/ui/contact-form.scss @@ -1,7 +1,14 @@ +// The gap has to beat the distance from a field to its own error message, +// which Material renders flush underneath it — 0px. At 1.25rem the message +// ended up 6px from the *next* field's label and 0px from its own field, so +// "Falta el nombre" read as the caption of "HORAS POR SEMANA" rather than of +// the field above it. The three lines have to group with the field they belong +// to, which means the space between rows must be visibly larger than the space +// inside one. .landing-form { display: flex; flex-direction: column; - gap: 1.25rem; + gap: 2rem; } .landing-form__kind {