fix: make mobile nav backgrounds fully opaque

[prathamesh04]

fixes #29757

the mobile top nav and bottom nav were using semi-transparent backgrounds (bg-cal-muted/50 and bg-cal-muted/40 respectively). when you scroll down on any page, the content underneath bleeds through and overlaps with the nav text, making it unreadable.

changed both to use bg-cal-muted (fully opaque) so the nav stays solid regardless of scroll position. kept the backdrop-blur for the visual effect.

what changed:

• TopNav.tsx: bg-cal-muted/50 → bg-cal-muted
• Navigation.tsx: bg-cal-muted/40 → bg-cal-muted

tested on chrome/android, scrolling up and down on event-types and bookings pages. nav stays opaque now, no text bleeding through.

cc @dhairyashiil @bandhan-majumder would appreciate a review when you get a chance

[github-actions]

Welcome to Cal.diy, @prathamesh04! Thanks for opening this pull request.

A few things to keep in mind:

• This is Cal.diy, not Cal.com. Cal.diy is a community-driven, fully open-source fork of Cal.com licensed under MIT. Your changes here will be part of Cal.diy — they will not be deployed to the Cal.com production app.
• Please review our Contributing Guidelines if you haven't already.
• Make sure your PR title follows the Conventional Commits format.

A maintainer will review your PR soon. Thanks for contributing!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 886cbdd5-218e-4c75-8177-14fcd647a0c7

📥 Commits

Reviewing files that changed from the base of the PR and between f004349 and 6282af9.

📒 Files selected for processing (2)

• apps/web/modules/shell/TopNav.tsx
• apps/web/modules/shell/navigation/Navigation.tsx

---

📝 Walkthrough

Walkthrough

Updated the mobile top navigation background from semi-transparent to opaque and updated the fixed bottom mobile navigation background from partially transparent to opaque. Existing positioning, borders, layout, blur behavior, rendering logic, and embed visibility conditions remain unchanged.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the change to make mobile nav backgrounds opaque.
Description check	✅ Passed	The description accurately describes the mobile nav opacity fix and links it to the reported bug.
Linked Issues check	✅ Passed	[#29757] The changes make the mobile nav backgrounds opaque, which addresses the reported overlap issue.
Out of Scope Changes check	✅ Passed	No unrelated code changes are shown beyond the nav background opacity update.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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.}