fix(navigation): apply theme-consistent scrollbar styling to mobile dropdown

[D-source1602]

Fixes #7904

Problem--

The "mobile-dropdown "scrollbar inside the navigation menu was using hardcoded gray values (#cbced1 track, #868e96 thumb), while the page scrollbar uses "theme.scrollbarColor"from "app.style.js" — resulting in visual inconsistency between the two.

Solution--

Replaced the hardcoded colors in "navigation.style.js" with the same theme variables used globally:

• "webkit-scrollbar-track" → "props.theme.body"
• "webkit-scrollbar-thumb" → "props.theme.scrollbarColor"
• Added "scrollbar-color`"property for Firefox cross-browser support

In dark mode, scrollbarColor resolves to #00d3a9 (Layer5 green). In light mode it resolves to #3c494f (charcoal), matching the page scrollbar in both themes.

Files changed--

• src/sections/General/Navigation/navigation.style.js

Summary by CodeRabbit

• Style
  • Updated the mobile navigation dropdown scrollbar to use theme colors for improved visual consistency.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: bc2714ad-2d81-4ece-aeca-4275f7ac4e0d

📥 Commits

Reviewing files that changed from the base of the PR and between 264856f and d14b97f.

📒 Files selected for processing (1)

• src/sections/General/Navigation/navigation.style.js

---

📝 Walkthrough

Walkthrough

The mobile navigation dropdown scrollbar now uses theme-provided colors for its track and thumb. The standard scrollbar receives the same themed color pair.

Changes

Navigation scrollbar styling

Layer / File(s)	Summary
Apply theme colors to navigation scrollbars src/sections/General/Navigation/navigation.style.js	Replaces fixed gray scrollbar colors with theme-provided scrollbarColor and body colors for standard and webkit scrollbar styles.

Estimated code review effort: 1 (Trivial) | ~5 minutes

🚥 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 clearly and concisely describes the theme-consistent scrollbar styling change for the mobile navigation dropdown.
Linked Issues check	✅ Passed	The changes replace hardcoded colors with theme values and add Firefox support, satisfying issue #7904.
Out of Scope Changes check	✅ Passed	The changes are limited to navigation scrollbar styling and directly support the requirements in issue #7904.
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

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: dependency version conflict. Check your lock file or package.json.

---

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

[dhruveshmishra]

@D-source1602 can u attach the screenshot or screen recording in the pr description for your changes

[D-source1602]

Hi @dhruveshmishra, here's the visual explanation of the change:

Before (hardcoded gray):

• Scrollbar track: #cbced1 (light gray)
• Scrollbar thumb: #868e96 (medium gray)
• Inconsistent with the page scrollbar

After (theme-aware):

• Scrollbar track: props.theme.body → white in light mode, dark in dark mode
• Scrollbar thumb: props.theme.scrollbarColor → #3c494f in light mode, #00d3a9 (Layer5 green) in dark mode
• Matches the global page scrollbar defined in app.style.js

I will attach a screenshot once I have the local dev environment running.
The code change itself is minimal and verifiable in the diff — 3 lines changed in navigation.style.js.

[github-actions]

Preview deployment for PR #7942 removed.

This PR preview was automatically pruned because we keep only the 3 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.