Comfy-Org / Comfy-Org/ComfyUI_frontend

[Bug]: Tab scrolling arrows don't function when workflow tabs overflow on touch device

Open Beginner friendly
#5,203 2 comments 0 reactions 0 assignees View on GitHub
area:mobile area:topbar-menu help wanted Potential Bug
Dominant language
TypeScript
Stars
2k
Forks
702
Avg merge
1d 8h
Merged PRs (30d)
512

Description

### Prerequisites

- [x] I am running the latest version of ComfyUI
- [x] I have searched existing issues to make sure this isn't a duplicate
- [x] I have tested with all custom nodes disabled

### What happened?

The left and right arrow buttons that appear when workflow tabs overflow are non-functional **for touch devices**. When clicked, they don't scroll through the tabs as expected. The arrows appear correctly when tabs overflow the container, but clicking them produces no scrolling behavior.

This affects the ability to navigate to tabs that are out of view when many workflows are open.

### Steps to Reproduce

1. Open multiple workflow tabs (enough to cause horizontal overflow)
2. Observe that left/right arrow buttons appear when tabs overflow
3. Click either the left or right arrow buttons
4. Notice that no scrolling occurs - tabs remain in the same position

### How is this affecting you?

Feature doesn't work as expected

### ComfyUI Frontend Version

1.26.6 (development/main branch)

### Browser

Chrome, Firefox (tested on multiple browsers)

### Console Errors

No JavaScript errors appear in console when clicking the arrows.

### Logs

No relevant server-side logs.

### Additional Context

- The arrows appear at the correct time when overflow occurs
- The overflow detection logic seems to work (arrows show/hide appropriately)
- Only the actual scrolling functionality is broken
- Related to WorkflowTabs.vue component in src/components/topbar/
- May be related to PrimeVue ScrollPanel DOM structure or scroll method implementation

The issue appears to be in the `scroll()` function implementation that doesn't properly target the scrollable element or execute the scrollBy operation.

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-5203-Bug-Tab-scrolling-arrows-don-t-function-when-workflow-tabs-overflow-on-touch-device-25a6d73d3650817e8b93c8455e59df0b) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Research direction

Start with src/components/topbar/WorkflowTabs.vue and inspect the scroll() function, then review how the PrimeVue ScrollPanel exposes its scrollable element. Reproduce the overflow case on a touch device and verify that clicking both arrows moves the workflow tabs into and out of view without console errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.