Comfy-Org / Comfy-Org/ComfyUI_frontend
[Bug]: Tab scrolling arrows don't function when workflow tabs overflow on touch device
- 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
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