fix(ui): resolve submit button layout clipping on signup form #524

[sanikatavate]

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • Improved sign-up form layout for better responsiveness across different screen sizes.

• Refactor

  • Streamlined password validation logic in the sign-up process.

[coderabbitai]

📝 Walkthrough

Walkthrough

SignUpPage simplifies form handling by removing inline password validation from handleSubmit and improves layout styling. The form now delegates validation elsewhere, while the container switches from fixed h-screen with scroll to flexible min-h-screen with centered alignment.

Changes

Sign-up form simplification

Layer / File(s)	Summary
Form submission handler and layout container updates frontend/pages/SignUpPage.jsx	handleSubmit removes previously defined passwordStrength and passwordRegex validation variables. Outer container div updates from h-screen overflow-y-auto to min-h-screen and adds justify-center for improved viewport scrolling and vertical alignment.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• UTKARSHH20/fullstack-chat-app#460: Both PRs modify the sign-up page's outer wrapper layout classes to address overflow and centering behavior.
• UTKARSHH20/fullstack-chat-app#466: Both PRs remove the password-strength/regex validation flow from handleSubmit in SignUpPage.

Suggested labels

level:intermediate

Poem

🐰 The sign-up form hops cleaner now,
No password rules to slow the flow,
Just min-h-screen to center right,
A simpler form, a better sight! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: fixing UI layout issues (specifically submit button clipping) on the signup form by adjusting the container div styling from h-screen to min-h-screen and adding justify-center.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/pages/SignUpPage.jsx (1)

158-158: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Password validation mismatch between frontend and backend.

The backend only requires passwords to be at least 6 characters, but the frontend enforces minLength={8} (line 158) and displays detailed complexity requirements (lines 176-185) that the backend does not validate.

Impact:

• Users cannot submit valid 6-7 character passwords that the backend would accept
• The displayed requirements (uppercase, lowercase, number, special character) mislead users into thinking these are enforced server-side
• Creates UX confusion and blocks legitimate input

Recommended fix:
Either update the frontend to match backend validation (6 characters minimum, remove complexity text), or update the backend to enforce the stricter rules shown in the UI.

Option 1: Align frontend to backend (6 chars minimum)

-                                    minLength={8}
+                                    minLength={6}
                                     required
                                 />

                             <div className="mt-2 text-xs text-base-content/60">
-                                <p>Password must contain:</p>
-                                <ul className="list-disc ml-4 mt-1">
-                                    <li>At least 8 characters</li>
-                                    <li>One uppercase letter (A-Z)</li>
-                                    <li>One lowercase letter (a-z)</li>
-                                    <li>One number (0-9)</li>
-                                    <li>One special character (@, #, $, !, %, &, *)</li>
-                                </ul>
+                                <p>Password must be at least 6 characters</p>
                             </div>

Option 2: Align backend to frontend (8 chars + complexity)

Update backend/src/middleware/validate.js to enforce the displayed requirements.

Also applies to: 176-185

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/pages/SignUpPage.jsx` at line 158, The password rules in the
SignUpPage.jsx UI don't match backend validation: change the password input and
helper text to match the backend's minimum of 6 characters by updating the
password input's minLength prop from 8 to 6 (the password input element in
SignUpPage.jsx) and remove or replace the detailed complexity requirements block
(the helper/description lines currently showing
uppercase/lowercase/number/special character guidance) so the frontend only
enforces/communicates "minimum 6 characters" to match the server; ensure any
client-side pattern/validation logic tied to that input is also removed or
relaxed to accept 6+ characters.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@frontend/pages/SignUpPage.jsx`:
- Line 158: The password rules in the SignUpPage.jsx UI don't match backend
validation: change the password input and helper text to match the backend's
minimum of 6 characters by updating the password input's minLength prop from 8
to 6 (the password input element in SignUpPage.jsx) and remove or replace the
detailed complexity requirements block (the helper/description lines currently
showing uppercase/lowercase/number/special character guidance) so the frontend
only enforces/communicates "minimum 6 characters" to match the server; ensure
any client-side pattern/validation logic tied to that input is also removed or
relaxed to accept 6+ characters.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d3210e61-6a73-4397-a852-73d98b07a443

📥 Commits

Reviewing files that changed from the base of the PR and between 48e8f3e and 9f999b2.

📒 Files selected for processing (1)

• frontend/pages/SignUpPage.jsx