Skip to content

Conversation

@dmnyc
Copy link

@dmnyc dmnyc commented Nov 25, 2025

Summary

Fixes a z-index bug where the "Trending 24h" dropdown menu in the main timeline would appear behind image galleries in posts.

Changes

  • SelectionBox2.tsx: Wrapped Select.Content with Select.Portal to render dropdown outside normal DOM hierarchy
  • SelectionBox2.tsx: Added positioning props (gutter={8}, placement="bottom-start", shift={-8}, sameWidth={false}) to maintain original dropdown alignment
  • SelectionBox.module.scss: Increased dropdown z-index from var(--z-index-lifted) (10) to 100
  • HomeSidebar.module.scss: Increased sidebar heading z-index from 5 to 50
  • Layout.module.scss: Added position: relative; z-index: 100 to .rightColumn

Root Cause

The .centerColumn element had position: relative, creating an isolated stacking context. This prevented the dropdown (rendered as a child of .rightColumn) from appearing above content in the center column, regardless of z-index values.

Solution

Using Select.Portal renders the dropdown at the document body level, completely escaping all parent stacking contexts. This ensures the dropdown appears above all page content while maintaining proper positioning relative to its trigger.

Test Plan

  • Verify dropdown appears above image galleries in posts
  • Verify dropdown positioning matches original alignment
  • Tested with top 24-hour trending post ID:
    nevent1qvzqqqqqqypzqeqq2md08cn2vft4vd3yk49qkw6hn8t59zc7yp770mxwln3j4ak2qqsvv968dyyrl4utjc0g9zptywvzqk3wj7glnemexsr4lqwsa59xzysxj23l5

Screenshots

Before:
image

After:
image

Dev note: This fix was developed with Claude Sonnet 4.5.

- Wrap Select.Content with Select.Portal to render dropdown at document body level
- Add positioning props (gutter, placement, shift) to maintain alignment
- Increase z-index values for sidebar heading and right column
- Fixes issue where dropdown menu would appear behind post image galleries

Resolves z-index stacking context issue by using portal rendering
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant