Fix Products dropdown transparency on Thousands of developers section

[Divyansh2992]

Fixes #11279

This PR adds an opaque background to the Products dropdown to prevent UI overlap on the “Thousands of developers” section.
Before

After

Summary by CodeRabbit

• Chores

  • Removed a development dependency from the project setup.

• Style

  • Improved visual layering of the products dropdown menu to ensure it appears above other content.
  • Standardized and centralized the dropdown background styling for a consistent appearance across the submenu.

[coderabbitai]

Walkthrough

The pull request removes the devDependency "@sveltejs/adapter-node" from package.json. It also updates src/lib/components/ProductsSubmenu.svelte: the submenu container z-index is changed from z-10 to z-[9999], a new CSS class products-dropdown-bg is added to the outer container and inner panel in place of the previous static background, and a global style block defining .products-dropdown-bg with background color #232325 and full opacity is introduced.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 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: adding an opaque background to the Products dropdown to fix transparency issues on the 'Thousands of developers' section, which aligns with the commit message and PR description.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/lib/components/ProductsSubmenu.svelte (2)

233-238: Previous duplicate background-color issue is fixed — minor nit on redundant opacity.

Good that the duplicate background-color: #000000`` from the prior review has been removed. However, opacity: 1 is the default for all elements and can be dropped.

Proposed cleanup

 <style>
     .products-dropdown-bg {
         background-color: `#232325`;
-        opacity: 1;
     }
 </style>

---

115-115: z-[9999] is excessively high for a dropdown menu.

The codebase establishes a clear z-index hierarchy: z-1000 for modals/dialogs (highest priority), z-100 for other overlays, and z-10 for general content. Using z-[9999] (9999) violates this pattern and unnecessarily bloats the stacking context. Change to z-100, which is already used elsewhere in the project for overlays and sufficient to position the dropdown above page content.

Additionally, opacity: 1 in the .products-dropdown-bg style block is redundant—elements have full opacity by default.

Proposed fix

-        'data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in relative !left-1/2 z-[9999] mx-auto mt-6 hidden w-full -translate-x-1/2 flex-col items-center p-0 outline-none [max-inline-size:86.875rem] md:flex'
+        'data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in relative !left-1/2 z-100 mx-auto mt-6 hidden w-full -translate-x-1/2 flex-col items-center p-0 outline-none [max-inline-size:86.875rem] md:flex'

 .products-dropdown-bg {
     background-color: `#232325`;
-    opacity: 1;
 }

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/lib/components/ProductsSubmenu.svelte`:
- Around line 233-239: Remove the dead duplicate background-color in the
ProductsSubmenu.svelte style block by deleting the first background-color:
`#000000` declaration so only background-color: `#232325` remains for
.products-dropdown-bg; also evaluate whether the :global(.products-dropdown-bg)
wrapper is necessary—if the class is only used inside this component, replace
:global(.products-dropdown-bg) with a local .products-dropdown-bg selector and
ensure the template applies that class to the element so Svelte's scoped CSS
handles it.

🧹 Nitpick comments (1)

src/lib/components/ProductsSubmenu.svelte (1)

115-115: Use a reasonable z-index value aligned with the project's scale.

The z-[9999] value is excessively high and isolated to this component. The project uses a z-index scale up to z-1000 for overlays; using z-[100] or z-[1000] would be more appropriate. The current value makes it difficult to layer other UI elements (modals, notifications, etc.) above or below the dropdown without further z-index conflicts.

Proposed fix

-        'data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in relative !left-1/2 z-[9999] mx-auto mt-6 hidden w-full -translate-x-1/2 flex-col items-center p-0 outline-none [max-inline-size:86.875rem] md:flex'
+        'data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in relative !left-1/2 z-[1000] mx-auto mt-6 hidden w-full -translate-x-1/2 flex-col items-center p-0 outline-none [max-inline-size:86.875rem] md:flex'