[PR #3195] Update model-manager.css old close button override #3095

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/3195
Author: @admdev24
Created: 8/23/2026
Status: 🔄 Open

Base: main ← Head: patch-7

📝 Commits (3)

b7fa568 Update model-manager.css old close button override
6278f05 Update model-manager.css
5bf9a83 Update model-manager.css

📊 Changes

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

View changed files

📝 js/model-manager.css (+83 -1)

📄 Description

UI/UX Optimization of the ComfyUI Manager Dashboard1. Core Framework Overrides & Layout Synchronization:

Maintain the same style as the main UI

1. Core Framework Overrides & Layout Synchronization

Original Style: The top-right close button (×) suffered from an unstyled layout flash glitch caused by a structural style race condition across comfyui-manager.js, custom-nodes-manager.js, and model-manager.js. On startup and during active database loading states (Loading custom nodes (cache) ...), the close icon was trapped inside an unstyled boxy outline, completely losing its alignment metrics and scaling proportions.
Updated Style: Wiped out all inherited border boundaries, tracking boxes, and box-shadow outlines, shifting the button container into a clean, transparent, boundary-free profile on idle. The script was modified using a localized

## 📋 Pull Request Information **Original PR:** https://github.com/Comfy-Org/ComfyUI-Manager/pull/3195 **Author:** [@admdev24](https://github.com/admdev24) **Created:** 8/23/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `patch-7` --- ### 📝 Commits (3) - [`b7fa568`](https://github.com/Comfy-Org/ComfyUI-Manager/commit/b7fa5681d4e0f1a3be2282e1651385b8e555c52f) Update model-manager.css old close button override - [`6278f05`](https://github.com/Comfy-Org/ComfyUI-Manager/commit/6278f05e749b63e4d20370ddbfcbd71f3d175246) Update model-manager.css - [`5bf9a83`](https://github.com/Comfy-Org/ComfyUI-Manager/commit/5bf9a83d943a1033073b3c7c41440286da70c59c) Update model-manager.css ### 📊 Changes **1 file changed** (+83 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `js/model-manager.css` (+83 -1) </details> ### 📄 Description ### UI/UX Optimization of the ComfyUI Manager Dashboard1. Core Framework Overrides & Layout Synchronization: **Maintain the same style as the main UI** **1. Core Framework Overrides & Layout Synchronization** - > **Original Style:** The top-right close button (×) suffered from an unstyled layout flash glitch caused by a structural style race condition across comfyui-manager.js, custom-nodes-manager.js, and model-manager.js. On startup and during active database loading states (Loading custom nodes (cache) ...), the close icon was trapped inside an unstyled boxy outline, completely losing its alignment metrics and scaling proportions. - **Updated Style:** Wiped out all inherited border boundaries, tracking boxes, and box-shadow outlines, shifting the button container into a clean, transparent, boundary-free profile on idle. The script was modified using a localized <style> block to capture the asynchronous loading sequences natively, enforcing crisp, unwarped structural dimensions from the very first frame the DOM node initializes. **2. Optical Alignment Calibration & Hover Feedback** - > **Original Style:** The native font glyph calculations for the letter X forced a mathematical center layout that created an optical illusion, making the icon look pushed off-center and tilted to the right. When moving the cursor pointer over the target button, the background remained static, unshaded, or glitched into a rough square frame. - **Updated Style:** Separated the close character layer from the background container to allow independent spatial manipulation. The X character remains securely center-locked using precise text padding metrics, while an isolated, floating pseudo-element (::before) layer generates an elegant, light-grey circular backplate (rgba(255, 255, 255, 0.15)) exclusively on cursor hover. - **Precision Tuning:** Fine-tuned the horizontal coordinate alignment metrics across the separate panel scripts (calibrating the main dialogs to transform: translate(-74.5%, -50%) and the sub-manager loading sheets to transform: translate(-55%, -50%)) to completely eliminate the optical illusion, ensuring a visually perfect, eye-centered layout across all dashboard modules. This patch depends on #3188 Before: <img width="2153" height="1159" alt="2026-08-22_16-16-57" src="https://github.com/user-attachments/assets/f5ad4b2b-70a6-4869-8150-9ea2a9970422" /> After: <img width="2151" height="1174" alt="2026-08-22_16-19-09" src="https://github.com/user-attachments/assets/34b8dc6d-469f-4f2a-b5de-31a32155fe40" /> --- <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

bsakaguchi referenced this issue

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

[PR #3254] Add QBB NodeOps to custom-node-list #3140