improvement: replace canvas toolbar toggle expansion with popover UI#690
Merged
breaking-brake merged 1 commit intomainbreaking-brake/cc-wf-studio:mainfrom Mar 27, 2026
improvement/toolbar-popover-uibreaking-brake/cc-wf-studio:improvement/toolbar-popover-uiCopy head branch name to clipboard
Merged
improvement: replace canvas toolbar toggle expansion with popover UI#690breaking-brake merged 1 commit intomainbreaking-brake/cc-wf-studio:mainfrom improvement/toolbar-popover-uibreaking-brake/cc-wf-studio:improvement/toolbar-popover-uiCopy head branch name to clipboard
breaking-brake merged 1 commit intomainbreaking-brake/cc-wf-studio:mainfrom
improvement/toolbar-popover-uibreaking-brake/cc-wf-studio:improvement/toolbar-popover-uiCopy head branch name to clipboard
Conversation
- Replace inline expand animation with Radix Popover portal approach - Toggle settings UI appears as popover centered on button via portal - Add scaleX CSS animation for smooth horizontal expand effect - Add usePopoverHover hook for stable trigger+portal hover management - Remove useStableHover hook (no longer needed) - Increase toolbar button gap from 6px to 8px - Adjust node palette expand button margin Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
📝 WalkthroughWalkthroughThe PR refactors multiple canvas toolbar toggle components from hover-driven inline expansion to Radix Popover-based interactions, introduces a new Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/webview/src/components/WorkflowEditor.tsx (1)
458-458: Consider deriving the toolbar offset dynamically to improve maintainability.The margin increased from 48px to 56px to position the expand button below the CanvasToolbar (which is 34px tall). While the value appears correct for the current toolbar dimensions, it's a hardcoded magic number that will require manual updates if the toolbar height or spacing changes in the future. Consider deriving this value dynamically (via a CSS variable, a calculated constant, or a ref measurement) to reduce coupling between components and improve maintainability.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/webview/src/components/WorkflowEditor.tsx` at line 458, Replace the hardcoded marginTop '56px' on the Panel with a dynamically computed offset derived from the CanvasToolbar's actual height/spacing: add a ref on the CanvasToolbar (e.g., toolbarRef), measure its height (via getBoundingClientRect or a ResizeObserver) and store a CSS variable or component state (e.g., toolbarHeight or --canvas-toolbar-offset) and use that value to set Panel's marginTop (or style={{ marginTop: `${toolbarHeight + extraSpacing}px` }}). Update references to Panel and CanvasToolbar in WorkflowEditor.tsx so the expand button positioning uses the measured toolbar size rather than the magic number.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/webview/src/components/WorkflowEditor.tsx`:
- Line 458: Replace the hardcoded marginTop '56px' on the Panel with a
dynamically computed offset derived from the CanvasToolbar's actual
height/spacing: add a ref on the CanvasToolbar (e.g., toolbarRef), measure its
height (via getBoundingClientRect or a ResizeObserver) and store a CSS variable
or component state (e.g., toolbarHeight or --canvas-toolbar-offset) and use that
value to set Panel's marginTop (or style={{ marginTop: `${toolbarHeight +
extraSpacing}px` }}). Update references to Panel and CanvasToolbar in
WorkflowEditor.tsx so the expand button positioning uses the measured toolbar
size rather than the magic number.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: a0c5a10d-047f-4d8c-922b-fce683ab94a3
📒 Files selected for processing (10)
src/webview/src/components/CanvasToolbar.tsxsrc/webview/src/components/EdgeAnimationToggle.tsxsrc/webview/src/components/HighlightToggle.tsxsrc/webview/src/components/InteractionModeToggle.tsxsrc/webview/src/components/MinimapToggle.tsxsrc/webview/src/components/ScrollModeToggle.tsxsrc/webview/src/components/WorkflowEditor.tsxsrc/webview/src/hooks/usePopoverHover.tssrc/webview/src/hooks/useStableHover.tssrc/webview/src/styles/main.css
💤 Files with no reviewable changes (1)
- src/webview/src/hooks/useStableHover.ts
breaking-brake
commented
Mar 27, 2026
| {/* Expand Node Palette Button (when collapsed) */} | ||
| {isNodePaletteCollapsed && onExpandNodePalette && ( | ||
| <Panel position="top-left" style={{ marginTop: '48px' }}> | ||
| <Panel position="top-left" style={{ marginTop: '56px' }}> |
Owner
Author
There was a problem hiding this comment.
The toolbar height (34px) is stable and unlikely to change. Introducing a ref + ResizeObserver for this would add unnecessary complexity. This is consistent with other hardcoded Panel marginTop values in the codebase. No change needed.
Merged
|
🎉 This PR is included in version 3.31.1 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
1 task
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replace the inline expanding toggle UI in the canvas toolbar with a Radix Popover-based approach for better UX and no overflow clipping issues.
What Changed
Before
useStableHoverhook handled hover detection with complex bounds checkingAfter
scaleXCSS animation for horizontal expand effectusePopoverHoverhook tracks trigger + portal hover independentlyChanges
src/webview/src/components/ScrollModeToggle.tsx- Popover UIsrc/webview/src/components/InteractionModeToggle.tsx- Popover UIsrc/webview/src/components/EdgeAnimationToggle.tsx- Popover UIsrc/webview/src/components/HighlightToggle.tsx- Popover UIsrc/webview/src/components/MinimapToggle.tsx- Popover UIsrc/webview/src/components/CanvasToolbar.tsx- Button gap adjustmentsrc/webview/src/components/WorkflowEditor.tsx- Node palette button marginsrc/webview/src/hooks/usePopoverHover.ts- New hook for portal hoversrc/webview/src/hooks/useStableHover.ts- Removed (unused)src/webview/src/styles/main.css- Popover animation keyframesTesting
🤖 Generated with Claude Code
Summary by CodeRabbit
Release Notes
New Features
Style