Comfy-Org / Comfy-Org/ComfyUI_frontend

Subgraph name editor min-width is fixed, causing layout shift when entering/leaving edit mode

Open
#7,149 1 comment 1 reaction 0 assignees View on GitHub
area:ui
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 searched existing issues to make sure this isn't a duplicate
- [x] I have tested with all custom nodes disabled ([see how](https://docs.comfy.org/troubleshooting/custom-node-issues#step-1%3A-test-with-all-custom-nodes-disabled))

### What happened?

The subgraph name editor has a fixed min-width that doesn't adapt to the content width when editing. This causes a visible layout shift when:
1. Entering edit mode (clicking to edit the name)
2. Leaving edit mode (pressing Enter or clicking away)

Additionally, the text size differs between view and edit modes, which contributes to the layout shift.

https://github.com/user-attachments/assets/e5080acd-2fbe-4a47-9d71-d21a6a2bc035

**Related files:**
- `src/components/graph/TitleEditor.vue`
- `src/components/common/EditableText.vue`

### Steps to Reproduce

1. Create a subgraph node (or group) with a short name
2. Click on the name to enter edit mode
3. Observe the layout shift as the editor appears
4. Press Enter to confirm
5. Observe the layout shift as the editor closes

### How is this affecting you?

Visual/UI issue only

### ComfyUI Frontend Version

1.34.5

### Browser

Chrome/Chromium

### Additional Context

The editor should adapt its width to match the content width to minimize layout shift. The text size in edit mode should also match the view mode text size as closely as possible.

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-7149-Subgraph-name-editor-min-width-is-fixed-causing-layout-shift-when-entering-leaving-ed-2bf6d73d365081f8b2e0ec15b9313417) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.