[GH-ISSUE #2762] Manager buttons unstyled due to PrimeVue 4 lazy CSS injection #1031

New issue

Closed

opened 2026-10-27 21:25:09 +00:00 by bsakaguchi · 0 comments

bsakaguchi commented

2026-10-27 21:25:09 +00:00

Owner

Originally created by @LulevMichael on GitHub (Apr 5, 2026).
Original GitHub issue: https://github.com/Comfy-Org/ComfyUI-Manager/issues/2762

Description

Manager buttons (Custom Nodes Manager, Install Missing Custom Nodes, etc.) appear blocky with no border-radius, incorrect padding, and the close (X) button has a visible background instead of being transparent with a translucent hover effect. The dialog header and content area are also missing styling.

Opening the ComfyUI Settings dialog (gear icon, bottom-left) and closing it immediately fixes all styling — confirming the issue is CSS availability, not CSS conflicts.

Root Cause

The Manager creates plain HTML elements with PrimeVue CSS class names (.p-button, .p-button-text, .p-button-rounded, .p-dialog, .p-dialog-header, etc.) in buildGuiFrame() (js/comfyui-gui-builder.js), expecting PrimeVue's CSS to style them.

PrimeVue 4 lazily injects component CSS — it only adds .p-button, .p-dialog, etc. styles to the DOM when a real PrimeVue component (Button, Dialog) is first mounted. Since the Manager creates plain DOM elements (not PrimeVue components), the CSS never gets injected. It only appears after the user opens another dialog (like Settings) that uses actual PrimeVue components.

This changed in comfyui-frontend-package 1.33.9 — PrimeVue 3 (used in <= 1.33.8) included all component CSS upfront as global stylesheets.

Steps to reproduce

Start ComfyUI with --enable-manager --enable-manager-legacy-ui
Hard-refresh the browser (Ctrl+Shift+R) to clear cached styles
Open the Manager dialog — buttons are blocky/unstyled, close button has visible background
Close Manager, open Settings (gear icon, bottom-left), then close it
Re-open Manager — buttons are now correctly styled

Affected versions

ComfyUI Manager V4.1 (pip) and V3.39.x (main branch)
comfyui-frontend-package >= 1.33.9 (works correctly on <= 1.33.8)

Suggested fix

Either:

Trigger PrimeVue's Button/Dialog style injection early (e.g., by briefly mounting a PrimeVue Button component during setup)
Use actual PrimeVue components instead of plain DOM elements with PrimeVue class names
Add explicit styles to the Manager's own CSS for all PrimeVue classes used in buildGuiFrame()

Environment

ComfyUI v0.18.1
ComfyUI frontend 1.42.8
ComfyUI Manager V4.1 (pip) / V3.39.2 (git)
Linux

Originally created by @LulevMichael on GitHub (Apr 5, 2026). Original GitHub issue: https://github.com/Comfy-Org/ComfyUI-Manager/issues/2762 ## Description Manager buttons (Custom Nodes Manager, Install Missing Custom Nodes, etc.) appear blocky with no border-radius, incorrect padding, and the close (X) button has a visible background instead of being transparent with a translucent hover effect. The dialog header and content area are also missing styling. Opening the ComfyUI **Settings** dialog (gear icon, bottom-left) and closing it immediately fixes all styling — confirming the issue is CSS availability, not CSS conflicts. ## Root Cause The Manager creates plain HTML elements with PrimeVue CSS class names (`.p-button`, `.p-button-text`, `.p-button-rounded`, `.p-dialog`, `.p-dialog-header`, etc.) in `buildGuiFrame()` (`js/comfyui-gui-builder.js`), expecting PrimeVue's CSS to style them. **PrimeVue 4 lazily injects component CSS** — it only adds `.p-button`, `.p-dialog`, etc. styles to the DOM when a real PrimeVue component (Button, Dialog) is first mounted. Since the Manager creates plain DOM elements (not PrimeVue components), the CSS never gets injected. It only appears after the user opens another dialog (like Settings) that uses actual PrimeVue components. This changed in `comfyui-frontend-package` **1.33.9** — PrimeVue 3 (used in <= 1.33.8) included all component CSS upfront as global stylesheets. ## Steps to reproduce 1. Start ComfyUI with `--enable-manager --enable-manager-legacy-ui` 2. Hard-refresh the browser (Ctrl+Shift+R) to clear cached styles 3. Open the Manager dialog — buttons are blocky/unstyled, close button has visible background 4. Close Manager, open **Settings** (gear icon, bottom-left), then close it 5. Re-open Manager — buttons are now correctly styled ## Affected versions - ComfyUI Manager V4.1 (pip) and V3.39.x (main branch) - `comfyui-frontend-package` >= 1.33.9 (works correctly on <= 1.33.8) ## Suggested fix Either: 1. Trigger PrimeVue's Button/Dialog style injection early (e.g., by briefly mounting a PrimeVue Button component during setup) 2. Use actual PrimeVue components instead of plain DOM elements with PrimeVue class names 3. Add explicit styles to the Manager's own CSS for all PrimeVue classes used in `buildGuiFrame()` ## Environment - ComfyUI v0.18.1 - ComfyUI frontend 1.42.8 - ComfyUI Manager V4.1 (pip) / V3.39.2 (git) - Linux

bsakaguchi closed this issue

2026-10-27 21:25:09 +00:00

bsakaguchi referenced this issue

2026-10-27 21:33:33 +00:00

[PR #1031] [CLOSED] add custom node info #1661