Contact form fields not editable on desktop

[mariana-caldas]

What do we need to build or fix?

After merging our latest PRs for the ongoing conversion from Styled Components (deprecated library) back to SCSS, I noticed a bug on the Contact page (https://www.webdevpath.co/contact
). The first three form fields (Name, Email, Subject) are not editable on desktop. The inputs function normally on mobile devices, but desktop users are unable to type into them, which prevents them from sending messages.

Technical details

• Issue happens only on desktop view (tested in Chrome and Safari).
• Fields affected: Name, Email, Subject.
• Likely related to recent style changes during the Styled Components → SCSS migration.
• Message field appears to work fine.

Approach suggestions

• Inspect the CSS rules applied to the form on desktop, checking if positioning, z-index, or overlays are blocking the inputs.
• Compare mobile vs. desktop styles in SCSS to find inconsistencies introduced during migration.
• Test reverting or isolating recent changes to the form components to confirm the source.

Deadline
Please keep in mind that once you assign this task to yourself, you'll need to complete it in 5 days.

Acceptance criteria

• Test the section and components across multiple screen sizes (use Inspect tool).
• Confirm that fixes for the desktop issue don’t break form functionality on mobile.
• Test the form in multiple browsers: Chrome, Firefox, Edge, Safari (Mac).
• Run yarn build locally to solve any build problems before submitting your PR.
• Update the CHANGELOG.md file with the fix.

[Satoshi-Sh]

The issue comes from the hero section update.

Headercontent is covering the input fields from name to subject.

Adding position:relative and z-index:20 to the .form in ContactUsForm.module.scss seems fixing the issue.

I also found a styling is a bit odd on certain width. Would be nice if somene can have a look at this too.

[cherylli]

The issue comes from the hero section update.

Headercontent is covering the input fields from name to subject.

Adding position:relative and z-index:20 to the `.form` in `ContactUsForm.module.scss` seems fixing the issue.

this can be fixed by changing the z-index

I also found a styling is a bit odd on certain width. Would be nice if somene can have a look at this too.

what size is this? I can't reproduce it on my browser

[Satoshi-Sh]

what size is this? I can't reproduce it on my browser

Oh it should be shorter height, I'm not sure if we need to care for it.

[briangesteban]

what size is this? I can't reproduce it on my browser

Oh it should be shorter height, I'm not sure if we need to care for it.

Hi @Satoshi-Sh and @cherylli Should I also apply a fix for this?