Comfy-Org / Comfy-Org/ComfyUI_frontend

Toast notifications are clipped instead of adapting to the viewport on mobile

Open
#15,294 1 comment 0 reactions 0 assignees View on GitHub
area:mobile area:ui Potential Bug
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
- [x] I have custom nodes enabled

### What happened?

Toast notifications do not properly adapt their width to small/mobile viewports.

Image

On a mobile browser, a toast can become wider than the available screen width, causing part of the notification to be clipped off-screen instead of resizing to fit the viewport.

In the attached screenshot, both notifications extend beyond the left edge of the screen, making part of their contents unreadable.

The notification component should constrain itself to the available viewport width, preserve reasonable horizontal margins, and wrap its contents when necessary.

### Steps to Reproduce

1. Install [ComfyUI-OpenPose-Studio](https://github.com/andreszs/ComfyUI-OpenPose-Studio) (v2.3.0 or newer)
2. Open ComfyUI from a mobile browser, or resize the browser window to a narrow/mobile-sized viewport.
3. Open the OpenPose Studio node.
4. Go to the **Gallery** tab.
5. Add any pose from the Gallery to the canvas.
6. This triggers a ComfyUI toast notification.
7. Observe that, on a sufficiently narrow viewport, the toast extends outside the visible screen and gets clipped instead of adapting its width to the available space.

The issue was reproduced on a physical Android phone using Opera, but it should also be reproducible from desktop browser developer tools using a mobile-sized viewport.

### Workflow

No specific workflow is required to reproduce the issue.

The screenshot was taken while using the **ComfyUI-OpenPose-Studio** custom node, which triggers informational toast notifications when poses are added to its editor.

Repository:
https://github.com/andreszs/ComfyUI-OpenPose-Studio

Any workflow or frontend action capable of producing a sufficiently long toast notification should expose the same responsive-layout issue.

### How is this affecting you?

Crashes ComfyUI completely

### ComfyUI Frontend Version

1.45.21

### Browser

Chrome/Chromium

### Console Errors

```javascript

```

### Logs

```shell

```

### Additional Context

I noticed this issue while working on the mobile layout adaptation of my [ComfyUI-OpenPose-Studio](v) custom node:

OpenPose Studio provides a relatively complex editor UI inside ComfyUI, including pose editing, galleries, rendering tools, presets and other controls, so I have recently been testing and optimizing its interface for direct use from mobile devices.

During this work, the OpenPose Studio interface itself was made responsive enough to fit the mobile viewport, but ComfyUI's own toast notifications remained wider than the available screen and were clipped.

The attached screenshot makes the contrast particularly visible: the custom node UI fits within the viewport, while the toast notifications rendered by the ComfyUI frontend extend outside it.

A possible fix would be to enforce a mobile-safe maximum width based on the available viewport width minus the notification container's horizontal margins.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue in the ComfyUI frontend at a narrow mobile-sized viewport, then search for the toast or notification component that renders these messages. Check its width, margins, and text wrapping behavior; the work is done when long toasts remain fully visible and wrap within the available viewport without clipping.

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
64/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.