feat: remove hover dimming overlay and add shadow to image action buttons

[comfydesigner]

• Remove the opacity-60 dimming overlay on image hover in Save Image, Preview Image, and Load Image nodes
• Add shadow-lg to the hover action buttons for better visibility against the undimmed image

┆Issue is synchronized with this Notion page by Unito

[vercel]

Someone is attempting to deploy a commit to the ComfyUI Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

A Vue component was updated to remove conditional hover/focus opacity styling from the main image element and add a persistent drop shadow effect to action buttons through CSS class modifications.

Changes

Cohort / File(s)	Summary
ImagePreview Component Styling src/renderer/extensions/vueNodes/components/ImagePreview.vue	Removed conditional class binding (cn(...) logic) that applied transition-opacity and opacity-60 on hover/focus to the main image element. Added shadow-lg class to actionButtonClass for persistent drop shadow on floating action buttons.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A shadow now graces each button's place,
While images glow without hover's embrace,
Less logic, more grace—the view is refined,
Simpler styling, a cleaner design! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The pull request description is minimal and lacks the required template structure with Summary, Changes, and Review Focus sections.	Restructure the description to follow the template: add a one-sentence Summary, detail the What and Breaking changes under Changes, and explain critical design decisions under Review Focus.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main changes: removing hover dimming and adding shadow to action buttons, matching the core modifications in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
End-To-End Regression Coverage For Fixes	✅ Passed	PR title uses feature language (feat:) with no bug-fix keywords, satisfying the condition that neither PR title nor commit subjects use bug-fix language.
Adr Compliance For Entity/Litegraph Changes	✅ Passed	Modified file is located outside scope of src/lib/litegraph/, src/ecs/, and core graph entity files. Changes are purely UI-related styling updates.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[christian-byrne]

Draft Review — Architectural Feedback

Verdict: 🟢 Direction looks good

What's looking good

• Tightly scoped change (one shared component, +2/-7) that naturally covers Save Image, Preview Image, and Load Image since they all consume ImagePreview.vue.
• Approach is sound: removing the dimming layer in favor of higher-contrast buttons (shadow-lg) preserves image fidelity on hover, which is what users care about most when previewing outputs.
• Static class string after the simplification — no need for the conditional cn() branch anymore. cn import is still used elsewhere in the file, so no orphan import.

Notes (non-blocking, for when you mark ready)

• PR is currently CONFLICTING against main — please rebase before flipping out of draft so review can run cleanly.
• Worth a quick visual sanity check on a light-themed image (e.g. mostly white output) to confirm shadow-lg still gives the action buttons enough separation. If it looks weak there, a subtle ring or backdrop-blur on the button cluster is an easy follow-up — but only if the visual check shows a problem.

Suggested direction

Keep the current shape. Rebase, do a quick light-image visual check, then mark ready — this should be a small, low-risk merge.

---

This is an early-stage review focused on direction — detailed line-by-line feedback will come when the PR is marked ready for review.