Fix Codevs Filter Dropdown Z-Index Visibility fix codevs filter dropdown

[raineer24]

PR Summary: Fix Codevs Filter Dropdown Z-Index Visibility

Branch

fix/codevs-filter-visibility-z-index

Problem

Filter dropdown in Codevs tab was rendering beneath codev member cards, making it partially or fully hidden when opened.

Root Cause

• Filter dropdown used z-[1] which was insufficient
• Trapped in parent stacking context
• Codev cards had higher z-index priority

Solution

Single File Modified:

• apps/codebility/app/home/interns/_components/FilterCodevs.tsx

Key Changes:

1. Portal Rendering - Dropdown now renders to document.body using createPortal, escaping all parent stacking contexts
2. Z-Index Fix - Increased to z-50 (dropdown) + z-40 (backdrop overlay)
3. Dynamic Positioning - Calculates dropdown position relative to button using refs
4. Click-Outside Close - Added backdrop overlay to close filter when clicking outside
5. Dark Mode Support - Full light/dark theme consistency

Technical Details

• Uses React createPortal for proper layering
• Fixed positioning relative to viewport
• Backdrop prevents interaction with page while filter is open
• Responsive: 90vw mobile, 384px tablet, 320px desktop

Testing

• Filter opens above codev cards
• Click outside closes dropdown
• All filter checkboxes functional (Position/Status/Projects)
• Dark mode works correctly
• Mobile responsive layout
• "Clear all" button works

Visual Result

Filter dropdown now properly overlays all content with no visibility issues.

---

Ready for review @Guo-Alyssa-Lyn

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
codebility-plus-codebility-portal	Ready	Preview, Comment	Dec 23, 2025 3:40pm