fix: resolve landing navbar overflow on mobile

[AYUSH-P-SINGH]

🚀 Pull Request Description

In mobile view, the rightmost CTA button in the navbar extends outside the visible container, causing layout overflow and poor responsiveness.

Fixes # (issue number)
290

🛠️ Type of Change
🐛 Bug fix (non-breaking change which fixes an issue)
🎨 UI/UX improvement (Frontend only)

Frontend Verification:
Verified the UI changes on different screen sizes (Responsive).
Checked for any console errors in the browser dev tools.

📸 Screenshots

Before
Navbar CTA button overflowed outside the viewport on smaller mobile widths.
After
Navbar CTA button remains inside the viewport.
Improved

---

Built with ❤️ for urBackend.

Summary by CodeRabbit

• Style
  • Improved responsive design for the landing page navigation on tablet and mobile devices with optimized spacing, layout adjustments, and button sizing for better visual consistency across different screen sizes.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b5d774fc-0c90-40f5-9133-5a68aa5ac67e

📥 Commits

Reviewing files that changed from the base of the PR and between 23c590b and add3790.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (1)

• apps/web-dashboard/src/pages/LandingPage/style.css

---

📝 Walkthrough

Walkthrough

CSS-only update to landing page navigation styling adds responsive rules for tablet (max-width: 1024px) and mobile (max-width: 420px) breakpoints, controlling nav visibility, overflow, spacing, and button sizing while fixing CSS structural syntax.

Changes

Landing Page Navigation Responsive Styling

Layer / File(s)

Summary

Mobile and tablet navigation breakpoints apps/web-dashboard/src/pages/LandingPage/style.css

Responsive navigation rules updated for tablet view add body overflow-x: hidden, hide desktop nav elements, adjust nav container padding and nav-actions spacing, and tweak menu layout. New @media(max-width: 420px) block hides nav-menu further, adjusts container padding and justify behavior, reduces gap in nav-actions, and shrinks primary button padding and font size. CSS structure syntax corrected at end of media-query section.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A nav that bends from wide to small,
Hiding, shrinking, answering the call—
From tablet screens to phones so tight,
Our bunny hops to get it right!
With overflow and spacing tight,
The responsive journey feels just right. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing navbar overflow issues on mobile devices through CSS responsive design adjustments.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.}

[yash-pouranik]

this is not the way u are doing this.
Disappointed.
@AYUSH-P-SINGH