Form validation error messages are positioned too low due to excessive top margin on the .error class, causing them to overlap with content from other elements below the form field, making the error text unreadable.
- Environment
Chrome 140.0.7339.128,
Screen: 3840x2160
-To Reproduce
Go to the contact form
Fill in a field (e.g. name or timeline expectation) and then clear the text
The error message appears but overlaps with the title of the field below it
-Possible cause
In components/hubspot/input-fields/input-fields.module.scss, the .error class seems to have too much margin-top
.error {
margin-top: mobile-vw(72px);
@include desktop {
margin-top: desktop-vw(95px);
}
}
When I reduce the margin by about 1vw in dev tools, the error becomes visible and properly positioned.