Comfy-Org / Comfy-Org/ComfyUI_frontend

[Bug]: App Mode input panel pushed offscreen when output gallery becomes horizontally scrollable

Open Beginner friendly
#14,908 6 comments 3 reactions 0 assignees View on GitHub
area:ui browser:firefox Potential Bug PrimeVue
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

### Prerequisites

- [x] I am running the latest version of ComfyUI
- [ ] I have custom nodes enabled

### What happened?

When using the new app mode, generating a sufficient number of images to make a scrollbar appear on the output gallery at the bottom causes the right-hand inputs panel to be gradually pushed offscreen to the right.

### Steps to Reproduce

1. Set up app mode and switch to it
2. Generate enough images to fill up the bottom output gallery until a scroll bar appears
3. Next image gen pushes the input panel off the right-hand side of the screen.

### How is this affecting you?

Visual/UI issue only

### ComfyUI Frontend Version

1.48.6

### Browser

Firefox

### Console Errors

```javascript
p-splitter's minimum size is returned as 2371.5 px
```

### Logs

```shell

```

### Additional Context

Debugged with ChatGPT, which told me that the fix is:
```Diff
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@

```

And my temporary fix for now using a userstyle in Stylus is:
```css
nav.side-tool-bar-container + .p-splitter {
min-width: 0 !important;
}
```

It also told me that https://github.com/Comfy-Org/ComfyUI_frontend/issues/9508 may potentially be related.

Contributor guide

Open the contributing guide

Research direction

Start in src/views/LinearView.vue and inspect the Splitter component's layout classes, then reproduce the issue in app mode by filling the output gallery until it scrolls horizontally. Verify that the inputs panel remains visible at the affected viewport sizes and that the console no longer reports an excessive minimum size.

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
Active
Clarity
Clearly specified
Newbie friendliness
82/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.