Comfy-Org / Comfy-Org/ComfyUI_frontend

[Bug]: DOM widget width halved when right side panel is open

Open Beginner friendly
#13,068 2 comments 1 reaction 0 assignees View on GitHub
area:dom-widgets platform:windows Potential Bug
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

# [Bug]: DOM widget width halved when right side panel is open

## Prerequisites

- [x] I am running the latest version of ComfyUI
- [x] I have searched existing issues to make sure this isn't a duplicate
- [x] I have tested with custom nodes disabled where applicable

## What happened?

Custom nodes that use DOM widgets (HTML-based UI rather than native LiteGraph widgets) render at approximately half their correct width when the right side panel is open. The widget appears correctly sized on initial load, but after clicking the node to select it, `DomWidgets.vue`'s `updateWidgets` sets the widget width to ~460px instead of the correct ~960px.

**Workaround:** Closing the right side panel before working with DOM widget nodes restores correct behaviour.

## Steps to reproduce

1. Open the right side panel (click any node so the Parameters/Info/Settings panel appears on the right)
2. Add any custom node that uses a DOM widget (e.g. `one-node-flux-2-klein`)
3. Click the node to select it
4. The widget content is constrained to approximately half the node's width

## Expected behaviour

The DOM widget should fill the full width of the node regardless of whether the right side panel is open or closed.

## Actual behaviour

The DOM widget is rendered at approximately half the node's width (~460px instead of ~960px) when the right side panel is open.

## Root cause (identified via DevTools)

The canvas `` element has a `width` attribute of 960px (correct), but its `getBoundingClientRect().width` returns 480px because the canvas is physically displayed at 50% of its logical size due to the right panel consuming screen space.

`updateWidgets` in `DomWidgets.vue` appears to use the canvas element's `width` attribute (960px) rather than its rendered screen width (480px) when calculating widget position/size, causing a 2× mismatch. With the right panel closed, both values match and everything works correctly.

Console evidence:

```
canvas element width attribute: 960
canvas getBoundingClientRect().width: 480 ← half, due to right panel
widget width set to: 460px ← should be ~960px
```

## Call stack at time of incorrect width assignment

```
updateWidgets DomWidgets.vue:88
useChainCallback useChainCallback.ts:22
drawFrontCanvas LGraphCanvas.ts:5155
drawFrontCanvas use_everywhere.js:177
draw LGraphCanvas.ts:5034
renderFrame LGraphCanvas.ts:2150
(Async: FrameRequestCallback)
```

## Additional context

- Affects **all** custom nodes using DOM widgets, not just a specific node
- Reproduces on both the ComfyUI Desktop app and the portable Windows version
- Frontend version 1.33.0 and older does **not** exhibit this bug — it was introduced somewhere after that.

## Environment

| | |
|---|---|
| ComfyUI frontend version | 1.45.15 |
| ComfyUI Desktop version | 0.25.1 |
| Operating system | Windows |
| GPU | NVIDIA |

Image

Image

Contributor guide

Open the contributing guide

Research direction

Start by reading updateWidgets in DomWidgets.vue at line 88 and tracing the canvas sizing through LGraphCanvas.ts:5155. Reproduce with the right panel open, compare the canvas width attribute with getBoundingClientRect().width, and verify that DOM widgets fill the node width with the panel both open and closed.

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
Quiet
Clarity
Clearly specified
Newbie friendliness
74/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.