Comfy-Org / Comfy-Org/ComfyUI_frontend
Toast notifications are clipped instead of adapting to the viewport on mobile
- 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.
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
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