Fix Products dropdown transparency on Thousands of developers section#2771
Fix Products dropdown transparency on Thousands of developers section#2771ChiragAgg5k merged 1 commit intoappwrite:mainfrom
Conversation
WalkthroughThe Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/lib/components/ProductsSubmenu.svelte (2)
115-115: Consider using a lower z-index value.
z-[9999]is excessively high and can cause conflicts with modals, toasts, or other overlay components. Typically, dropdowns work well withz-50orz-100. If the underlying section has a specific z-index, consider adjusting that instead, or establish z-index tokens/layers in the design system for consistency.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/lib/components/ProductsSubmenu.svelte` at line 115, In ProductsSubmenu.svelte update the dropdown container's utility class string (the class that currently contains 'z-[9999]') to use a much lower z-index (e.g., replace 'z-[9999]' with 'z-50' or 'z-100') or swap it for a design-system z-index token (e.g., 'z-dropdown' / a token name) so the component no longer uses an excessive global z-index and will play nicely with modals/toasts; edit the class on the element inside the ProductsSubmenu component where the long tailwind class string is defined to make this change.
233-237: Add an explanatory comment for the:global()usage.The
:global()approach is correct here—Melt UI portals dropdown content todocument.bodyby default, placing it outside the component's DOM tree. This makes scoped styles ineffective, so:global()is necessary.However, add a comment explaining this behavior to prevent future maintainers from refactoring it away:
<style> /* :global() is required because Melt UI portals the dropdown menu to document.body */ :global(.products-dropdown-bg) { background-color: `#232325`; } </style>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/lib/components/ProductsSubmenu.svelte` around lines 233 - 237, Add an inline explanatory comment above the :global(.products-dropdown-bg) style rule to note why :global() is required (Melt UI portals dropdown content to document.body so scoped styles won't apply), e.g. a brief one-line comment referencing Melt UI portal behavior and that the dropdown is rendered outside the component DOM, then keep the existing :global(.products-dropdown-bg) selector and background-color unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/lib/components/ProductsSubmenu.svelte`:
- Line 115: In ProductsSubmenu.svelte update the dropdown container's utility
class string (the class that currently contains 'z-[9999]') to use a much lower
z-index (e.g., replace 'z-[9999]' with 'z-50' or 'z-100') or swap it for a
design-system z-index token (e.g., 'z-dropdown' / a token name) so the component
no longer uses an excessive global z-index and will play nicely with
modals/toasts; edit the class on the element inside the ProductsSubmenu
component where the long tailwind class string is defined to make this change.
- Around line 233-237: Add an inline explanatory comment above the
:global(.products-dropdown-bg) style rule to note why :global() is required
(Melt UI portals dropdown content to document.body so scoped styles won't
apply), e.g. a brief one-line comment referencing Melt UI portal behavior and
that the dropdown is rendered outside the component DOM, then keep the existing
:global(.products-dropdown-bg) selector and background-color unchanged.
2 participants
What does this PR do?
This PR fixes a UI layering and background issue in the Products dropdown submenu (ProductsSubmenu.svelte).
Problem
The Products dropdown menu appeared transparent, causing the underlying “Thousands of developers” section to bleed through and overlap with the dropdown items. This made both the dropdown content and background section partially unreadable.
Before
After
Changes made
1.Increased Z-Index Priority
The previous z-10 value was not sufficient to guarantee proper stacking above all page content.
This update ensures the dropdown consistently renders above other sections.
2.Replaced Tailwind Arbitrary Background Value
The inline Tailwind arbitrary value (bg-[#232325]) was replaced with a dedicated CSS class.
3.Added Production-Safe Global Style
Uses :global() to apply styles correctly since the component integrates with Melt UI (use:melt), which operates outside Svelte's scoped styles.
Test Plan
Ran the project locally and verified:
The Products dropdown renders fully opaque.
No background content bleeds through.
Dropdown consistently appears above all page sections.
Ensured no layout regressions or console errors.
Related PRs and Issues
Replaces previous PR #2743.
This PR includes the updated fixes after syncing and resolving the failing checks.
Have you read the Contributing Guidelines on issues?
Yes
Summary by CodeRabbit