🐞 Bug: Signup Page UI/UX Issue – Misaligned reCAPTCHA, Poor Spacing, Visual Inconsistency

[Suraj0950]

Is there an existing issue for this?

• I have searched the existing issues.

Describe the bug

The Signup page UI currently appears visually unbalanced and difficult to use. Several elements (input fields, reCAPTCHA box, buttons, spacing) are misaligned or overlapping, creating a poor user experience.
This makes the onboarding flow confusing, especially for new users.

Steps to Reproduce

1. Go to https://circuitverse.org/users/sign_up
2. Fill the Data
3. Click on reCaptcha, when the verification expired it will how the the issue

Expected Behavior

The signup screen should -

1. Have consistent spacing & alignment.

2. Properly render reCAPTCHA inside the form container without overlapping.

3. Maintain clean visual hierarchy.

4. Present social login buttons in a balanced layout.

5. Match the overall styling guidelines of the project.

Possible Fix -

1. Wrap the reCAPTCHA box inside a responsive container (div) with proper padding.

2. Add consistent vertical spacing using margin-bottom or spacing utilities.

3. se Flexbox or Grid to realign social login buttons uniformly.

4. Improve form container max-width and alignment for mobile responsiveness.

5. Standardize font sizes and input field padding across the page.

Is the faced issue/bug related to the Vue simulator?

Yes

Used Vue simulator with or without backend?

None

Is the bug present only on the dev server, the build, or both?

None

Device Information

Browser: Chrome (latest)

OS: Windows 11 (or your OS)

Screen size: 1920×1080 (and tested on mobile viewport)

[Theminacious]

Hi @Suraj0950 , I’d like to work on this issue.

I’ll fix the following:

Proper alignment of reCAPTCHA inside the form container

Consistent vertical spacing between inputs and buttons

Better responsive layout using Flex/Grid

Visual consistency for social login buttons on all viewports

I’ll share before/after screenshots once I have a working fix.
Please assign this to me.

[Theminacious]

Hi @Suraj0950 ,
I have already explored the issue and confirmed that the signup page UI is coming from the Rails side (app/views/users/registrations/new.html.erb) and not the Vue simulator.

Before I start making changes, could you please confirm:

Is this issue available for me to work on?

Should the fix be limited to HTML/CSS layout only, or do you want a component-based refactor as well?

Once confirmed, I will provide before/after screenshots and open a PR.