Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

fix: resolve ConfirmDialog z-index issue in SubAgentFlowDialog#399

Merged
breaking-brake merged 1 commit intomainbreaking-brake/cc-wf-studio:mainfrom
fix/confirm-dialog-z-index-issuebreaking-brake/cc-wf-studio:fix/confirm-dialog-z-index-issueCopy head branch name to clipboard
Jan 7, 2026
Merged

fix: resolve ConfirmDialog z-index issue in SubAgentFlowDialog#399
breaking-brake merged 1 commit intomainbreaking-brake/cc-wf-studio:mainfrom
fix/confirm-dialog-z-index-issuebreaking-brake/cc-wf-studio:fix/confirm-dialog-z-index-issueCopy head branch name to clipboard

Conversation

@breaking-brake
Copy link
Copy Markdown
Owner

Problem

Current Behavior

  1. Open SubAgentFlowDialog by double-clicking a SubAgentFlow node
  2. Add a node (e.g., Prompt node) inside the dialog
  3. Select the node and press Delete key
  4. ❌ ConfirmDialog appears visually in front, but buttons are unclickable
  5. ❌ SubAgentFlowDialog captures mouse events instead

Expected Behavior

  1. Open SubAgentFlowDialog
  2. Add and select a node, press Delete key
  3. ✅ ConfirmDialog appears and buttons are clickable
  4. ✅ Delete/Cancel actions work correctly

Root Cause

Component Implementation z-index Issue
SubAgentFlowDialog Radix UI Dialog.Portal Auto-managed Creates isolated stacking context
ConfirmDialog Manual position: fixed 9999 Independent from Radix UI Portal system

Radix UI's Dialog.Portal renders elements directly under <body> with its own stacking context. The manual z-index management in ConfirmDialog conflicts with this system.

Solution

Migrate ConfirmDialog from manual implementation to Radix UI Dialog:

  • Use Dialog.Portal + Dialog.Overlay for proper stacking context integration
  • Set z-index: 10001 (higher than TermsOfUseDialog at 10000)
  • Preserve existing styling and props interface

Changes

File: src/webview/src/components/dialogs/ConfirmDialog.tsx

  • Replaced manual <div> implementation with Radix UI Dialog components
  • Added Dialog.Root, Dialog.Portal, Dialog.Overlay, Dialog.Content
  • Used Dialog.Title and Dialog.Description for accessibility
  • Maintained all existing button styling and hover effects

Impact

  • No breaking changes: Props interface (isOpen, title, message, etc.) unchanged
  • Accessibility improvement: Radix UI provides automatic focus trap and ESC key handling
  • Consistent behavior: Now uses same dialog system as other components (SkillBrowserDialog, McpNodeDialog)

Testing

  • Manual E2E testing completed
    • SubAgentFlowDialog: Delete confirmation works correctly
    • Main canvas: Node deletion works correctly (regression test)
    • RefinementChatPanel: Clear confirmation works correctly (regression test)
  • Code quality checks passed (npm run format && npm run lint && npm run check)
  • Build successful (npm run build)

🤖 Generated with Claude Code

- Migrate ConfirmDialog from manual implementation to Radix UI Dialog
- Set z-index: 10001 to ensure dialog appears above other Radix UI dialogs
- Fix issue where delete confirmation buttons were unclickable in SubAgentFlowDialog

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@breaking-brake breaking-brake merged commit 637c2fc into main Jan 7, 2026
3 checks passed
@breaking-brake breaking-brake deleted the fix/confirm-dialog-z-index-issue branch January 7, 2026 12:00
@breaking-brake breaking-brake mentioned this pull request Jan 7, 2026
braking-brake-semantic-release Bot pushed a commit that referenced this pull request Jan 7, 2026
## [3.12.9](v3.12.8...v3.12.9) (2026-01-07)

### Bug Fixes

* resolve ConfirmDialog z-index issue in SubAgentFlowDialog ([#399](#399)) ([637c2fc](637c2fc))
* use WEBVIEW_READY message instead of setTimeout ([#398](#398)) ([f72f4b2](f72f4b2))

### Improvements

* add resizable width to AI editing panel ([#397](#397)) ([14918d2](14918d2))
@braking-brake-semantic-release
Copy link
Copy Markdown

🎉 This PR is included in version 3.12.9 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Morty Proxy This is a proxified and sanitized view of the page, visit original site.