Skip to content

Conversation

@daniel-lxs
Copy link
Member

@daniel-lxs daniel-lxs commented Sep 8, 2025

Description

This PR fixes an issue where the CodeBlock language dropdown and copy button were appearing above popovers and other overlay elements.

Problem

The CodeBlockButtonWrapper component had a z-index: 100, which was higher than the standard popover z-index of 50 used throughout the application.

Solution

  • Changed the z-index from 100 to 40 in webview-ui/src/components/common/CodeBlock.tsx
  • This ensures the buttons remain visible and functional above regular content
  • They now properly stay below popovers and other overlay elements (z-index: 50)
  • The UI layering hierarchy is maintained correctly

Testing

  • ✅ All existing CodeBlock tests pass successfully
  • ✅ Type checking passes
  • ✅ Linting passes
  • ✅ Verified no other components have similar high z-index issues

Fixes #7703


Important

Adjust z-index of CodeBlockButtonWrapper in CodeBlock.tsx to fix overlay issue with popovers.

  • Behavior:
    • Adjust z-index of CodeBlockButtonWrapper in CodeBlock.tsx from 100 to 40 to fix overlay issue with popovers.
    • Ensures CodeBlock buttons are below popovers (z-index: 50) but above regular content.
  • Testing:
    • All existing tests, type checking, and linting pass.
    • Verified no other components have similar z-index issues.

This description was created by Ellipsis for 8b5f1ef. You can customize this summary. It will automatically update as commits are pushed.

Fixes #7703 - CodeBlock language dropdown and copy button were appearing above popovers due to z-index: 100. Reduced to z-index: 40 to maintain proper layering hierarchy while keeping buttons functional.
@dosubot dosubot bot added size:XS This PR changes 0-9 lines, ignoring generated files. bug Something isn't working UI/UX UI/UX related or focused labels Sep 8, 2025
@daniel-lxs daniel-lxs moved this from Triage to PR [Needs Review] in Roo Code Roadmap Sep 8, 2025
Copy link
Contributor

@roomote roomote bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your contribution! This is a clean and focused fix that correctly addresses the z-index layering issue. The change appropriately reduces the CodeBlock button z-index from 100 to 40, ensuring they stay below popovers (z-index: 50) while remaining above regular content.

The fix is minimal, well-tested, and properly resolves issue #7703. Great work!

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Sep 9, 2025
@mrubens mrubens merged commit 0188159 into main Sep 9, 2025
23 checks passed
@github-project-automation github-project-automation bot moved this from PR [Needs Review] to Done in Roo Code Roadmap Sep 9, 2025
@mrubens mrubens deleted the fix/codeblock-zindex-issue-7703 branch September 9, 2025 02:47
@github-project-automation github-project-automation bot moved this from New to Done in Roo Code Roadmap Sep 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working lgtm This PR has been approved by a maintainer PR - Needs Review size:XS This PR changes 0-9 lines, ignoring generated files. UI/UX UI/UX related or focused

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

Code Index Config page didn't intercept hover event

4 participants