Use scrollIntoView to keep active workflow tab visible #6077

benceruleanlu · 2025-10-15T18:47:52Z

"The watcher that should keep the active workflow tab visible compares the tab’s bounds against the scroll panel’s content element, whose rectangle spans the entire scroll width instead of the visible viewport. As a result, when the active tab starts off-screen, the computed offsets stay ≤ 0 and no corrective scroll occurs, so the selected tab remains hidden."

fixes #6057

https://chatgpt.com/codex/tasks/task_e_68efe2b5b4a08330940a20552c1db339

github-actions · 2025-10-15T18:48:17Z

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 10/15/2025, 06:49:45 PM UTC

🔗 Links

📊 View Workflow Run
🎨 View Storybook

🎉 Your Storybook is ready for review!

github-actions · 2025-10-15T18:48:19Z

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 10/15/2025, 07:13:33 PM UTC

📈 Summary

Total Tests: 497
Passed: 463 ✅
Failed: 0
Flaky: 4 ⚠️
Skipped: 30 ⏭️

📊 Test Reports by Browser

✅ chromium: View Report • ✅ 454 / ❌ 0 / ⚠️ 4 / ⏭️ 30
✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ mobile-chrome: View Report • ✅ 6 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

benceruleanlu · 2025-10-15T20:45:16Z

the adjacent ts code in WorkflowTabs.vue has some suspicious parts with bugs in not stopping watcchers and poking into $el internals, but it's out of scope for this

benceruleanlu · 2025-10-15T21:21:42Z

codex did not post the link

it's here: #6080

honestly optional to review, can drop it entirely, no biggie

claude · 2025-10-17T01:57:00Z

src/components/topbar/WorkflowTabs.vue


-    const offsetLeft = tabRect.left - containerRect.left
-    const offsetRight = tabRect.right - containerRect.right
+  activeTabElement.scrollIntoView({ block: 'nearest', inline: 'nearest' })


[quality] medium Priority

Issue: Missing error handling for DOM operations that could fail
Context: The scrollIntoView method can throw errors if the element is not properly attached to DOM or if scrolling is restricted
Suggestion: Wrap the scrollIntoView call in a try-catch block to handle potential DOM exceptions gracefully

non blocking

claude · 2025-10-17T01:57:08Z

src/components/topbar/WorkflowTabs.vue

-      '.p-scrollpanel-content'
-    )
-    if (!container) return
+  const scrollPanelElement = scrollPanelRef.value?.$el as


[performance] low Priority

Issue: Potentially redundant DOM queries in scroll behavior
Context: The function queries scrollPanelElement and then queries within it, but could cache the scroll panel content element for better performance
Suggestion: Consider caching the scroll panel content element reference to avoid repeated queries, especially since this function is called frequently during scroll events

non blocking

claude · 2025-10-17T01:57:15Z

src/components/topbar/WorkflowTabs.vue

-  () => workflowStore.activeWorkflow,
-  async () => {
-    if (!selectedWorkflow.value) return
+const ensureActiveTabVisible = async () => {


[architecture] low Priority

Issue: Function scope could be better optimized for component lifecycle
Context: The ensureActiveTabVisible function is defined in component scope but could benefit from being memoized or having better lifecycle management
Suggestion: Consider using useMemo or moving to a composable if this function will be reused across components, or add better cancellation for pending async operations when component unmounts

non blocking

claude · 2025-10-17T01:57:22Z

src/components/topbar/WorkflowTabs.vue


-    const offsetLeft = tabRect.left - containerRect.left
-    const offsetRight = tabRect.right - containerRect.right
+  activeTabElement.scrollIntoView({ block: 'nearest', inline: 'nearest' })


[quality] low Priority

Issue: ScrollIntoView options may not be supported in all target browsers
Context: The block: 'nearest' and inline: 'nearest' options are relatively modern features that may not be supported in older browsers
Suggestion: Consider checking browser compatibility requirements or add a fallback for older browsers. Alternatively, document the minimum browser version requirements if not already specified

non blocking

claude

Comprehensive PR Review

This review is generated by Claude. It may not always be accurate, as with human reviewers. If you believe that any of the comments are invalid or incorrect, please state why for each. For others, please implement the changes in one way or another.

Review Summary

PR: Use scrollIntoView to keep active workflow tab visible (#6077)
Impact: 19 additions, 22 deletions across 1 file

Issue Distribution

Critical: 0
High: 0
Medium: 1
Low: 3

Category Breakdown

Architecture: 1 issue
Security: 0 issues
Performance: 1 issue
Code Quality: 2 issues

Key Findings

Architecture & Design

The change follows Vue 3 Composition API patterns correctly and maintains the established component structure. The refactored function ensureActiveTabVisible provides better separation of concerns by extracting the scroll logic into a dedicated function. However, consider lifecycle management optimizations for better component performance.

Security Considerations

No security vulnerabilities identified. The DOM manipulation uses safe element queries and doesn't introduce XSS or injection risks.

Performance Impact

The simplified scrollIntoView approach should be more performant than manual getBoundingClientRect calculations. However, there are opportunities for optimization through DOM query caching and better error handling.

Integration Points

This change maintains backward compatibility with existing scroll behavior and doesn't affect the extension system or other components. The fix addresses issue #6057 regarding hidden active tabs.

Positive Observations

Clean simplification that replaces complex manual scroll calculations with native browser API
Maintains proper Vue 3 Composition API patterns
Good separation of concerns with extracted function
Proper null checking and early returns
Resolves the reported bug effectively

References

Repository Architecture Guide

Next Steps

Address the medium priority error handling issue before merge
Consider the low priority performance and architecture improvements for future iterations
Verify browser compatibility if targeting older browsers
Test the scroll behavior across different screen sizes and tab configurations

This is a comprehensive automated review. For architectural decisions requiring human judgment, please request additional manual review.

christian-byrne

LGTM!

> "The watcher that should keep the active workflow tab visible compares the tab’s bounds against the scroll panel’s content element, whose rectangle spans the entire scroll width instead of the visible viewport. As a result, when the active tab starts off-screen, the computed offsets stay ≤ 0 and no corrective scroll occurs, so the selected tab remains hidden." fixes #6057 ------ https://chatgpt.com/codex/tasks/task_e_68efe2b5b4a08330940a20552c1db339

Use scrollIntoView for workflow tab visibility

ef43804

benceruleanlu requested a review from pythongosssss as a code owner October 15, 2025 18:47

benceruleanlu added the codex label Oct 15, 2025 — with ChatGPT Codex Connector

benceruleanlu marked this pull request as draft October 15, 2025 18:48

dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Oct 15, 2025

benceruleanlu marked this pull request as ready for review October 15, 2025 20:44

christian-byrne added the claude-review Add to trigger a PR code review from Claude Code label Oct 17, 2025

claude bot reviewed Oct 17, 2025

View reviewed changes

github-actions bot removed the claude-review Add to trigger a PR code review from Claude Code label Oct 17, 2025

christian-byrne approved these changes Oct 17, 2025

View reviewed changes

christian-byrne merged commit 9f046a1 into main Oct 17, 2025
38 checks passed

christian-byrne deleted the codex/fix-issue-6057-in-comfyui branch October 17, 2025 07:37

dosubot bot mentioned this pull request Oct 26, 2025

If you exceed a certain number of open tabs, ComfyUI just decides not to show them #6312

Open

3 tasks

Uh oh!

Use scrollIntoView to keep active workflow tab visible #6077

Use scrollIntoView to keep active workflow tab visible #6077

Uh oh!

Conversation

benceruleanlu commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 Storybook Build Status

🔗 Links

Uh oh!

github-actions bot commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎭 Playwright Test Results

📈 Summary

📊 Test Reports by Browser

Uh oh!

benceruleanlu commented Oct 15, 2025

Uh oh!

benceruleanlu commented Oct 15, 2025

Uh oh!

claude bot Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

benceruleanlu Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

benceruleanlu Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

benceruleanlu Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

benceruleanlu Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot left a comment

Choose a reason for hiding this comment

Comprehensive PR Review

Review Summary

Issue Distribution

Category Breakdown

Key Findings

Architecture & Design

Security Considerations

Performance Impact

Integration Points

Positive Observations

References

Next Steps

Uh oh!

christian-byrne left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

benceruleanlu commented Oct 15, 2025 •

edited

Loading

github-actions bot commented Oct 15, 2025 •

edited

Loading

github-actions bot commented Oct 15, 2025 •

edited

Loading