[PR #3196] Update comfyui-gui-builder.js Universal close button override #3096

New issue

Open

opened 2026-10-28 21:15:07 +00:00 by bsakaguchi · 0 comments

bsakaguchi commented

2026-10-28 21:15:07 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/Comfy-Org/ComfyUI-Manager/pull/3196
Author: @admdev24
Created: 8/23/2026
Status: 🔄 Open

Base: main ← Head: patch-8

📝 Commits (1)

3662fe6 Update comfyui-gui-builder.js Universal close button override

📊 Changes

1 file changed (+29 additions, -1 deletions)

View changed files

📝 js/comfyui-gui-builder.js (+29 -1)

📄 Description

Visual Shield Blueprint: Close Button Factory Override

This code patch serves as an immediate style enforcement override block inside comfyui-gui-builder.js to eliminate browser layout delay. By intercepting the close button at its source, it rewrites the button properties directly in memory before the first frame paints onto your screen.

Original Style Structural Layout: In the native setup, the button was created using standard inline layout commands (style.float = "right"). It featured default solid browser background colors, visible borders, default margins, and unconstrained padding. This framework made the button completely dependent on the parent container width. Because of this, an unstyled square box flashed on the screen every time a menu opened, and the button would jump or wiggle to the left when asynchronous data loading triggered vertical scrollbars.
Updated Style Structural Layout: The new code block strips away the layout properties by assigning the custom comfy-close-btn class tag and forcing aggressive layout properties via style.setProperty(..., "important"). It completely removes the element from the shifting document layout flow using position: absolute, anchoring it into a static position at top: 12px and right: 12px. All background colors, borders, and outlines are set to transparent. Finally, it creates a rigid 32px by 32px flexbox collision wrapper (display: inline-flex). This ensures that the close icon stays centered and locked in place, while seamlessly adopting your custom gray hover circles and keyboard accessibility glow rings.

This patch depends on #3188

Before (loading):
2026-08-22_16-20-04

After:
2026-08-22_16-19-09

After (loading/hovering):
2026-08-22_16-52-44

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/Comfy-Org/ComfyUI-Manager/pull/3196 **Author:** [@admdev24](https://github.com/admdev24) **Created:** 8/23/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `patch-8` --- ### 📝 Commits (1) - [`3662fe6`](https://github.com/Comfy-Org/ComfyUI-Manager/commit/3662fe67aa33b6f323d6d6e51c71dc8db469f34f) Update comfyui-gui-builder.js Universal close button override ### 📊 Changes **1 file changed** (+29 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `js/comfyui-gui-builder.js` (+29 -1) </details> ### 📄 Description ### Visual Shield Blueprint: Close Button Factory Override This code patch serves as an immediate style enforcement override block inside comfyui-gui-builder.js to eliminate browser layout delay. By intercepting the close button at its source, it rewrites the button properties directly in memory before the first frame paints onto your screen. - > **Original Style Structural Layout:** In the native setup, the button was created using standard inline layout commands (style.float = "right"). It featured default solid browser background colors, visible borders, default margins, and unconstrained padding. This framework made the button completely dependent on the parent container width. Because of this, an unstyled square box flashed on the screen every time a menu opened, and the button would jump or wiggle to the left when asynchronous data loading triggered vertical scrollbars. - **Updated Style Structural Layout:** The new code block strips away the layout properties by assigning the custom comfy-close-btn class tag and forcing aggressive layout properties via style.setProperty(..., "important"). It completely removes the element from the shifting document layout flow using position: absolute, anchoring it into a static position at top: 12px and right: 12px. All background colors, borders, and outlines are set to transparent. Finally, it creates a rigid 32px by 32px flexbox collision wrapper (display: inline-flex). This ensures that the close icon stays centered and locked in place, while seamlessly adopting your custom gray hover circles and keyboard accessibility glow rings. This patch depends on #3188 Before (loading): <img width="2171" height="1178" alt="2026-08-22_16-20-04" src="https://github.com/user-attachments/assets/ce50455f-f4de-4a7f-84ce-f70ecaecc7cc" /> After: <img width="2151" height="1174" alt="2026-08-22_16-19-09" src="https://github.com/user-attachments/assets/403a4a2e-e2bd-4115-9e18-99fa7fc9edab" /> After (loading/hovering): <img width="2150" height="1172" alt="2026-08-22_16-52-44" src="https://github.com/user-attachments/assets/fba11497-15f5-4624-884b-8b3f42e186f8" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

bsakaguchi added the

pull-request

label

2026-10-28 21:15:07 +00:00