[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

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
74/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Quiet
Tech stack
typescript
Domain
frontend

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.

Description

area:dom-widgets platform:windows Potential Bug

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

Prerequisites

  • I am running the latest version of ComfyUI
  • I have searched existing issues to make sure this isn't a duplicate
  • 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 <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
Dominant language
TypeScript
Stars
2k
Forks
706
Avg merge
1d 4h
Merged PRs (30d)
554

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Comfy-Org/ComfyUI_frontend

All issues in Comfy-Org/ComfyUI_frontend

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.