Comfy-Org / Comfy-Org/ComfyUI_frontend
This is a common problem in the front-end: any "DOM control node" that carries an expired .width attribute will result in blank space on the right side.
- 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?
This is a common problem in the front-end: any "DOM control node" that carries an expired .width attribute will result in blank space on the right side. I confirmed the common mechanism in the ComfyUI frontend (GraphView-Cc2GkGnZ.js): When the 'updateWidgets' function calculates the element width for each DOM control, it uses:
js
Copy
( widget.width ?? node.width ) - 2*margin
That is to say, as long as this DOM control carries its own expired .width, the element will not expand to fill the entire node border - the panel will only occupy a part on the left and leave a blank space on the right. This is the common root cause of both Media Loader and KJ's "Model Preview Override".
The solution is the same for both: Make the .width of the control follow the node width frame by frame, so that ${widget.width} ?? node.width is equal to the node width, and the control element fills the entire border.
Modified:
Media Loader: ComfyUI-MiniMax-ContextIR\web\fant_medialoader.js (v6: this._mmlWidget.width = this.size[0])
KJ Model Preview Override: ComfyUI-KJNodes\web\js\preview_override\preview_override.js (New: povWidget.width = node.size[0] is synchronized frame by frame, and is cancelled when onRemoved is triggered)
Please test
### Steps to Reproduce
1.The width of the DOM control element = widget.width ?? node.width. That is: if the control has its own .width, use the control's width instead of the node's width.
Our Media Loader panel control has an outdated/small .width, so its element (as well as the .mml-panel with width:100%!important) is only filled to that width, while the node border is wider → there is a 1/3 blank space on the right.
The onResize/each-frame pin (v4/v5) that I previously modified was changing node.size, but the direction was wrong - because the actual width that determines the panel is widget.width, not node.size.
2.
3.
### Workflow
N/A
### How is this affecting you?
Crashes ComfyUI completely
### ComfyUI Frontend Version
1.51.9
### Browser
Edge
### Console Errors
```javascript
```
### Logs
```shell
```
### Additional Context
_No response_
Contributor guide
Research direction
Start by inspecting updateWidgets in GraphView-Cc2GkGnZ.js to confirm how widget.width and node.width determine DOM control sizing. Then review fant_medialoader.js and preview_override.js, verify that each control width tracks the node width throughout resizing, and test that the right-side blank space no longer appears.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100