fix(auth): resolve mobile layout collision and implement defensive runtime safeguards

[Soura149]

Closes: #163

This PR fixes a critical mobile layout collision bug on the Login page (/login and /register) where the top navigation elements ("Back to Home" and "Back" buttons) overlapped with the main heading text. Additionally, it addresses runtime client-side crashes that left the authentication pages completely blank/black when environment variables were missing or when local storage was corrupted.

Contribution Context

This Pull Request directly addresses Issue #163, which was opened and documented by me. Due to temporary maintainer/mentor inactivity in assigning the issue, development was carried out independently to resolve the bug. This PR provides a comprehensive structural fix alongside vital defensive stability updates.

Root Causes Resolved

1. Layout Overlap: The floating top navigation controls and the form headings competed for the same space on narrow/mobile viewports because the form card was pushed to the top of the screen.
2. Missing Google Client ID Crash: When the VITE_GOOGLE_CLIENT_ID environment variable was missing, the @react-oauth/google provider threw an unhandled runtime error on initialization, causing the entire React tree to crash.
3. Defensive Storage Parsing: If the localStorage user object was stored as an invalid JSON string (e.g. "undefined"), it threw a parsing exception and crashed the view.

---

Changes Made

1. Dedicated Global Navigation Header

• File: Frontend/src/pages/Login.jsx
• Moved the navigation header out of the Left Side column's internal flex container.
• Placed it in an absolute container spanning the top of the viewport (absolute top-0 left-0 right-0 z-50 p-6 md:p-8).
• Restored the Left Side column container back to a vertically centered layout (flex items-center justify-center min-h-screen relative z-10).
• This ensures the navigation acts independently of the form's grid and cards.

2. Spacing Refactoring in Authentication Forms

• Files: Frontend/src/components/auth/LoginForm.jsx, Frontend/src/components/auth/RegisterForm.jsx, Frontend/src/components/auth/PhoneLoginForm.jsx
• Replaced manual line breaks (<br/>) with fluid inline text elements in the subtitle.
• Replaced hardcoded margins with a consistent flex column structure (flex flex-col gap-y-6).
• Added generous top padding (pt-12) to the form wrappers. This pushes the main heading down dynamically, leaving a safe area below the top navigation header on all viewports.

3. Client ID and Defensive Parsing Safeguards

• File: Frontend/src/main.jsx
  • Added a fallback string ("dummy-client-id") for the clientId prop of GoogleOAuthProvider to prevent load-time crashes if the environment variable is not set.
• File: Frontend/src/pages/Login.jsx
  • Wrapped JSON.parse(user) inside the useEffect redirection hook in a try/catch block. If parsing fails, it clears the local storage defensively instead of crashing the page.

---

How to Verify and Test

1. Navigate to /login or /register in your browser.
2. Verify the page mounts successfully (no black screen or runtime errors in the console).
3. Toggle mobile viewport simulation (e.g. iPhone 14 Pro Max / 430px wide).
4. Verify that the "Home" / "Back" navigation controls sit cleanly at the top-left of the viewport, and the form text sits lower with proper vertical breathing room and no overlaps.
5. Verify that clicking "Home" takes you to the landing page, and clicking "Back" navigates back correctly within the authentication steps.

---

###Screenshot:

[vercel]

@Soura149 is attempting to deploy a commit to the Arsh Chauhan's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Soura149]

Hi @arshchouhan ,

I have submitted a comprehensive PR to fix this layout issue (#163), which I originally opened and documented.

While I noticed another contributor submitted an unassigned PR earlier, my PR provides a robust structural fix using clean layout flows that perfectly preserves the UI across all mobile breakpoints along with visual symmetry . Additionally, while working on the codebase, I implemented critical defensive safeguards to handle missing environment variables (VITE_GOOGLE_CLIENT_ID) and malformed local storage states that were causing client-side page crashes.

The fix and stability improvements are ready for review here: #175

Please let me know if any adjustments are needed!