fix: increase z-index of context menu to prevent UI obstruction #7760
Conversation
- Changed z-index from 1000 to 10001 in ChatTextArea.tsx - Changed z-index from 1000 to 10001 in ContextMenu.tsx - This ensures the @ mention dropdown appears above other UI elements - Fixes #7759
dosubot
bot
added
size:XS
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| "left-0", | ||
| "right-0", | ||
| "z-[1000]", | ||
| "z-[10001]", |
There was a problem hiding this comment.
I notice we're using Tailwind class here, but in ContextMenu.tsx we're using inline style . Should we consider using a consistent approach across both files? Tailwind classes would be preferable for maintainability.
| borderRadius: "3px", | ||
| boxShadow: "0 4px 10px rgba(0, 0, 0, 0.25)", | ||
| zIndex: 1000, | ||
| zIndex: 10001, |
There was a problem hiding this comment.
The jump from z-index 1000 to 10001 seems quite large. Looking at the codebase, modals use , so this context menu at 10001 is 10x higher. Could we consider establishing a more structured z-index scale? For example:
- Dropdowns: 1000-1999
- Modals: 2000-2999
- Tooltips/Context menus: 3000-3999
This would make the hierarchy clearer and prevent future conflicts.
hannesrudolph
added
the
Issue/PR - Triage
|
Closing this since bumping the z-index doesn’t solve the real problem. The ContextMenu is stuck inside nested stacking contexts (ChatRow → Virtuoso), so no z-index value will ever escape. The fix is to render it through a portal, same as ModeSelector, ApiConfigSelector, and SlashCommandsPopover. That way it always sits on top regardless of where ChatTextArea is. |
Description
This PR fixes an issue where the @ mention context menu (dropdown) was being obscured by other UI elements when editing information.
Problem
When users type '@' to mention files or context, the dropdown menu that appears could be hidden behind other UI elements due to insufficient z-index values.
Solution
Changes
Testing
Related Issue
Fixes #7759
Future Considerations
The codebase has inconsistent z-index usage across components. A future refactor could establish a consistent z-index scale to prevent similar issues.
Screenshots
The issue reporter provided a screenshot showing the problem in issue #7759. This fix ensures the dropdown menu is no longer obscured.
Checklist
Important
Increase z-index in
ChatTextArea.tsxandContextMenu.tsxto ensure context menu is not obscured by other UI elements.ChatTextArea.tsxandContextMenu.tsxto ensure context menu appears above other UI elements.This description was created by
for ffc63fb. You can customize this summary. It will automatically update as commits are pushed.