{{ message }}
Repository navigation
fix workflow history panel scroll in debug mode - #4532
Merged
Merged
Conversation
…src/' ## Summary - [SKY-7325](https://linear.app/skyvern/issue/SKY-7325/scroll-issue-in-run-history-view-isnt-working) Fixes the workflow history panel scroll in debug mode by adding the missing ScrollAreaViewport wrapper. ## Problem The workflow history panel version list couldn't be scrolled when opened in debug mode. The `ScrollArea` component requires both a bounded parent height and a `ScrollAreaViewport` wrapper to enable scrolling. The panel was missing the viewport wrapper (unlike `WorkflowNodeLibraryPanel` which scrolls correctly). ## What Changed - Added `h-[calc(100vh-14rem)]` wrapper div around `WorkflowHistoryPanel` in the debug mode panel section of `Workspace.tsx` - Added `ScrollAreaViewport` wrapper inside `ScrollArea` in `WorkflowHistoryPanel.tsx`, matching the pattern used by `WorkflowNodeLibraryPanel` - Added `overflow-hidden` to root container and `min-h-0` to `ScrollArea` for proper flex behavior <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Constrained the workflow history panel height and added overflow handling for more stable layout and scrolling. * **New Features** * Improved version list: interactive rows with click-to-select and checkboxes (multi-select), a “Current” badge, formatted modification times, and compare selection support. * Enhanced loading UX with skeleton placeholders until data loads. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai --> <!-- ELLIPSIS_HIDDEN --> ---- > [!IMPORTANT] > Fixes scrolling issue in `WorkflowHistoryPanel` in debug mode by adding a height constraint. > > - **UI Fix**: > - Added `h-[calc(100vh-14rem)]` wrapper div around `WorkflowHistoryPanel` in `Workspace.tsx` to enable scrolling in debug mode. > - **Components**: > - Updated `WorkflowHistoryPanel` to use `ScrollAreaViewport` for consistent scrolling behavior. > > <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=Skyvern-AI%2Fskyvern-cloud&utm_source=github&utm_medium=referral)<sup> for c6e02b5b93d95c432e6fcd423eb57342fc22e8f8. You can [customize](https://app.ellipsis.dev/Skyvern-AI/settings/summaries) this summary. It will automatically update as commits are pushed.</sup> <!-- ELLIPSIS_HIDDEN -->
Contributor
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Important
Looks good to me! 👍
Reviewed everything up to 441f8bd in 1 minute and 3 seconds. Click for details.
- Reviewed
170lines of code in2files - Skipped
0files when reviewing. - Skipped posting
3draft comments. View those below. - Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.
1. skyvern-frontend/src/routes/workflows/editor/Workspace.tsx:1412
- Draft comment:
Good fix – wrapping in a div with a bounded height (h-[calc(100vh-14rem)]) ensures that the panel receives a proper height and enables scrolling in debug mode. Consider centralizing this height value if it’s reused elsewhere. - Reason this comment was not posted:
Confidence changes required:0%<= threshold50%None
2. skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx:93
- Draft comment:
Adding 'overflow-hidden' to the container div helps enforce proper flex behavior, ensuring that the inner ScrollArea does not overflow its bounds. - Reason this comment was not posted:
Confidence changes required:0%<= threshold50%None
3. skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx:132
- Draft comment:
Wrapping the contents of ScrollArea with and adding 'min-h-0 flex-1' ensures proper scrolling within flexible layouts. This change aligns with how WorkflowNodeLibraryPanel implements scrolling. - Reason this comment was not posted:
Confidence changes required:0%<= threshold50%None
Workflow ID: wflow_lMrUMchaxW70Z3kC
You can customize 
Contributor
There was a problem hiding this comment.
Important
Looks good to me! 👍
Reviewed 441f8bd in 1 minute and 6 seconds. Click for details.
- Reviewed
170lines of code in2files - Skipped
0files when reviewing. - Skipped posting
2draft comments. View those below. - Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.
1. skyvern-frontend/src/routes/workflows/editor/Workspace.tsx:1287
- Draft comment:
Good fix – wrapping the WorkflowHistoryPanel in a div withh-[calc(100vh-14rem)]sets a bounded height, which is essential for enabling scroll in debug mode. Consider handling potential nulls for workflowPermanentId if needed. - Reason this comment was not posted:
Confidence changes required:0%<= threshold50%None
2. skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx:93
- Draft comment:
Nice enhancement – adding 'overflow-hidden' to the root container along with a ScrollAreaViewport inside a ScrollArea (with 'min-h-0 flex-1') properly constrains the scrollable area in a flex layout. - Reason this comment was not posted:
Confidence changes required:0%<= threshold50%None
Workflow ID: wflow_C8IKHYyeXN85or4g
You can customize
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In
`@skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx`:
- Around line 170-173: The Checkbox usage passes an unsupported onChange prop;
update the Checkbox component (the one rendering checked={isSelected}) to remove
onChange or replace it with the Radix prop onCheckedChange (e.g.,
onCheckedChange={...}) to match other usages; if the parent div's onClick
already controls selection no handler is needed on the Checkbox—either delete
the prop or wire onCheckedChange to the same selection toggle used by the parent
click handler to keep behavior consistent.
Comment on lines
+170
to
+173
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, let's check the actual file and see the imports
head -50 "skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx" | grep -E "import|from"Repository: Skyvern-AI/skyvern
Length of output: 631
🏁 Script executed:
#!/bin/bash
# Let's read the relevant section of the file around lines 170-173
sed -n '160,180p' "skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx"Repository: Skyvern-AI/skyvern
Length of output: 1021
🏁 Script executed:
#!/bin/bash
# Search for Checkbox component import
rg -n "Checkbox" "skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx" -B 5 -A 2 | head -50Repository: Skyvern-AI/skyvern
Length of output: 734
🏁 Script executed:
#!/bin/bash
# Find where Checkbox is imported from - check all imports in the file
rg -n "^import\|^from" "skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx" | head -30Repository: Skyvern-AI/skyvern
Length of output: 44
🏁 Script executed:
#!/bin/bash
# Find the checkbox component definition
find "skyvern-frontend" -name "checkbox*" -type fRepository: Skyvern-AI/skyvern
Length of output: 109
🏁 Script executed:
#!/bin/bash
# Check the checkbox component definition
cat "skyvern-frontend/src/components/ui/checkbox.tsx"Repository: Skyvern-AI/skyvern
Length of output: 1099
🏁 Script executed:
#!/bin/bash
# Search for all Checkbox usage in the codebase to see what props are used
rg -n "Checkbox" "skyvern-frontend/src" -A 5 -B 1 | grep -E "(onCheckedChange|onChange|checked)" | head -50Repository: Skyvern-AI/skyvern
Length of output: 6635
🏁 Script executed:
#!/bin/bash
# More comprehensive search for Checkbox usage patterns
rg -n "<Checkbox" "skyvern-frontend/src" -A 3Repository: Skyvern-AI/skyvern
Length of output: 10306
🏁 Script executed:
#!/bin/bash
# Check for Radix UI checkbox documentation or types in node_modules or package.json
if [ -f "skyvern-frontend/package.json" ]; then
rg -n "@radix-ui/react-checkbox" "skyvern-frontend/package.json"
fiRepository: Skyvern-AI/skyvern
Length of output: 106
Remove or replace the incorrect onChange prop with onCheckedChange.
The Radix UI Checkbox component (which the shadcn/ui wrapper uses) does not recognize the onChange prop. The correct prop is onCheckedChange, as evidenced by all other Checkbox usages throughout the codebase. Since the parent div element handles the click interaction via its onClick handler, either remove the prop entirely or use the correct onCheckedChange if the checkbox state change needs to be explicitly handled.
🤖 Prompt for AI Agents
In `@skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx`
around lines 170 - 173, The Checkbox usage passes an unsupported onChange prop;
update the Checkbox component (the one rendering checked={isSelected}) to remove
onChange or replace it with the Radix prop onCheckedChange (e.g.,
onCheckedChange={...}) to match other usages; if the parent div's onClick
already controls selection no handler is needed on the Checkbox—either delete
the prop or wire onCheckedChange to the same selection toggle used by the parent
click handler to keep behavior consistent.
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
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 - SKY-7325
Fixes the workflow history panel scroll in debug mode by adding the missing ScrollAreaViewport wrapper.
Problem
The workflow history panel version list couldn't be scrolled when opened in debug mode. The
ScrollAreacomponent requires both a bounded parent height and aScrollAreaViewportwrapper to enable scrolling. The panel was missing the viewport wrapper(unlike
WorkflowNodeLibraryPanelwhich scrolls correctly).What Changed
h-[calc(100vh-14rem)]wrapper div aroundWorkflowHistoryPanelin the debug mode panel section ofWorkspace.tsxScrollAreaViewportwrapper insideScrollAreainWorkflowHistoryPanel.tsx, matching the pattern used byWorkflowNodeLibraryPaneloverflow-hiddento root container andmin-h-0toScrollAreafor proper flex behaviorSummary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.
Important
Fixes scrolling issue in
WorkflowHistoryPanelin debug mode by adding necessary wrappers and styles for proper scrolling behavior.WorkflowHistoryPanelin debug mode by addingScrollAreaViewportwrapper insideScrollAreainWorkflowHistoryPanel.tsx.h-[calc(100vh-14rem)]wrapper div aroundWorkflowHistoryPanelinWorkspace.tsxfor bounded height.overflow-hiddento root container andmin-h-0toScrollAreafor proper flex behavior.This description was created by
for 441f8bd. You can customize this summary. It will automatically update as commits are pushed.
🔧 Fixes scrolling functionality in the workflow history panel when opened in debug mode by adding proper height constraints and ScrollAreaViewport wrapper to enable vertical scrolling through version history.
🔍 Detailed Analysis
Key Changes
h-[calc(100vh-14rem)]wrapper div aroundWorkflowHistoryPanelinWorkspace.tsxto provide bounded height for scrollingScrollAreaViewportcomponent inWorkflowHistoryPanel.tsxto properly enable scrolling functionalityoverflow-hiddento root container andmin-h-0toScrollAreafor proper flex behavior and scroll containmentTechnical Implementation
flowchart TD A[Workspace.tsx] --> B[Debug Mode Panel] B --> C[Height Constraint Wrapper] C --> D[WorkflowHistoryPanel] D --> E[ScrollArea with min-h-0] E --> F[ScrollAreaViewport] F --> G[Version List Content] H[Problem: No Scrolling] --> I[Missing Height Bounds] H --> J[Missing ScrollAreaViewport] I --> C J --> F style C fill:#e1f5fe style F fill:#e8f5e8 style H fill:#ffebeeImpact
WorkflowNodeLibraryPanelthat already implement this pattern correctlyCreated with Palmier