Comfy-Org / Comfy-Org/ComfyUI_frontend
[Bug]: Side panel button row clips / can't scroll on narrow (≤768px, mobile) viewports
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
### Summary
On narrow (mobile / touch) viewports, the **right side panel's action-button row does not wrap and the nested splitter panel does not scroll vertically**, so buttons overflow horizontally and become **clipped and unreachable**. A rigid-width inner column compounds it. On a phone this makes part of the side panel simply unusable — there is no touch-reachable way to get to the overflowed controls.
### Steps to reproduce
1. Open ComfyUI in a viewport ≤ 768px wide (a phone, or DevTools device toolbar).
2. Open the right side panel (the toolbox / properties splitter panel).
3. Observe the button row: it overflows its container rather than wrapping, the panel does not scroll vertically to reveal the overflow, and a fixed-width column pushes content off-screen.
### Expected
On narrow viewports the side-panel controls should either wrap onto multiple rows or the panel should scroll, so **every control stays reachable on a touch device**.
### Actual
The button row stays single-line with rigid widths, the nested splitter panel has no vertical scroll, and overflowed buttons are clipped and cannot be reached.
### Environment
- `comfyui-frontend-package` **1.45.20** (also reproduced on the surrounding recent releases)
- Touch / narrow viewport (≤ 768px); observed via live DevTools analysis, 2026-07
### Affected area (observed, caveated)
The PrimeVue splitter (`.p-splitterpanel`, `.p-splitterpanel-nested`) that hosts the side panel. The specific class chains below are **compiled Tailwind utilities** and are expected to be volatile between releases — they're included only to point at the region, not as a stable contract:
- the button row: `.p-splitterpanel .flex.gap-x-0.5`
- the fixed-width column: `.p-splitterpanel .mx-1.flex.flex-col.items-end.gap-1`
### Workaround (scoped CSS)
A narrow-viewport-scoped override restores usability without touching desktop:
```css
@media (max-width: 768px) {
.p-splitterpanel .flex.gap-x-0\.5 { flex-wrap: wrap; }
.p-splitterpanel.p-splitterpanel-nested { overflow-y: auto; }
.p-splitterpanel .mx-1.flex.flex-col.items-end.gap-1 {
width: auto; max-width: 100%; flex-shrink: 1;
}
}
```
This is currently shipped as a stopgap in a community custom-node pack ([`comfyui-touch-shim`](https://github.com/laurigates/comfyui-touch-shim), a home for small mobile/touch fixes for upstream frontend bugs) and will be removed the release this is fixed upstream. Happy to open a PR against the real components if that's welcome — the proper fix likely belongs in the splitter/toolbox layout rather than a media-query patch on compiled classes.
### Related
- #13068 — DOM widget width halved when the right side panel is open
- #7164 — Option to display toolbox buttons in the right side panel
Contributor guide
Research direction
Start by locating the PrimeVue splitter and toolbox layout components described in the issue, then reproduce the problem at a viewport of 768px or narrower. Verify that the action controls wrap or become vertically reachable on touch-sized screens, while desktop behavior remains unchanged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 56/100