fix: node preview Vue mode sizing in manager panel #7611
Conversation
Add lg-node-preview class to LGraphNodePreview for CSS targeting. Override absolute positioning and apply zoom scaling to fit previews within the manager info panel container.
Myestery
requested review from
a team,
christian-byrne,
ltdrdata and
viva-jinyi
as code owners
dosubot
bot
added
the
size:XS
📝 WalkthroughWalkthroughAdds a new public Changes
Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (3)
🧰 Additional context used📓 Path-based instructions (11)src/**/*.vue📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{vue,ts}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{composables,components}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/*.{vue,ts,tsx}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{components,composables}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/*.{js,ts,tsx,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
src/**/*.{ts,tsx,vue,js}📄 CodeRabbit inference engine (AGENTS.md)
Files:
src/components/**/*.vue📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
src/components/**/*.{vue,css}📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
src/components/**/*.{vue,ts,js}📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
🧠 Learnings (20)📓 Common learnings📚 Learning: 2025-12-11T03:55:51.755ZApplied to files:
📚 Learning: 2025-12-04T21:43:49.363ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-17T01:01:03.609ZApplied to files:
📚 Learning: 2025-12-09T03:49:52.828ZApplied to files:
📚 Learning: 2025-12-09T21:40:12.361ZApplied to files:
📚 Learning: 2025-12-16T22:26:49.463ZApplied to files:
📚 Learning: 2025-12-11T12:25:15.470ZApplied to files:
📚 Learning: 2025-12-18T02:07:38.870ZApplied to files:
📚 Learning: 2025-12-18T21:15:46.862ZApplied to files:
📚 Learning: 2025-12-11T03:55:57.926ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-17T01:01:03.609ZApplied to files:
📚 Learning: 2025-12-18T20:39:25.533ZApplied to files:
📚 Learning: 2025-12-17T01:01:03.609ZApplied to files:
📚 Learning: 2025-12-16T17:30:29.719ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-18T16:03:02.066ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
🔇 Additional comments (2)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue(1 hunks)src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue(1 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
src/**/*.vue: Vue 3 SFCs must use Composition API only - no Options API
Use<script setup lang="ts">for component logic
Use Tailwind 4 utility classes for styling - avoid<style>blocks
Usecn()utility from@/utils/tailwindUtilto merge Tailwind class names - never use:class="[]"syntax
Never use thedark:Tailwind variant - use semantic values fromstyle.csstheme instead (e.g.,bg-node-component-surface)
Use Vue 3.5+ TypeScript style default prop declaration with reactive destructuring - preferuseModelto prop/emit pairs, do not usewithDefaults
Do not import Vue macros unnecessarily
Use vue-i18n in composition API for string literals - place translation entries insrc/locales/en/main.json
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Avoid new usage of PrimeVue components
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vuesrc/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
src/**/*.{vue,ts}: Avoid usingrefandwatchtogether - usecomputedinstead if possible
Do not addrefif a prop would suffice; do not addcomputedif the ref/prop directly would work; usewatchonly whencomputedwon't accomplish the goal
Leverage VueUse functions for performance-enhancing styles
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vuesrc/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
src/**/*.{ts,tsx,vue}: ESLint rules: Vue + TS rules, no floating promises, unused imports disallowed, i18n raw text restrictions in templates
Use es-toolkit for utility functions
Avoid mutable state - prefer immutability and assignment at point of declaration
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vuesrc/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vuesrc/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vuesrc/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vuesrc/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
src/**/*.{js,ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively - no new JavaScript files
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vuesrc/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
src/**/*.{ts,tsx,vue,js}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx,vue,js}: Indent with 2 spaces, use single quotes, no trailing semicolons, line width 80 - see.prettierrc
Sort and group imports by plugin, runpnpm formatbefore committing
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vuesrc/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
🧠 Learnings (10)
📓 Common learnings
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:57.926Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.
📚 Learning: 2025-12-11T03:55:57.926Z
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:57.926Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panels
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vuesrc/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
📚 Learning: 2025-12-09T21:40:12.361Z
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.
Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vuesrc/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
📚 Learning: 2025-12-16T22:26:49.463Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.vue:17-17
Timestamp: 2025-12-16T22:26:49.463Z
Learning: In Vue 3.5+ with <script setup>, when using defineProps<Props>() with partial destructuring (e.g., const { as = 'button', class: customClass = '' } = defineProps<Props>() ), props that are not destructured (e.g., variant, size) stay accessible by name in the template scope. This pattern is valid: you can destructure only a subset of props for convenience while referencing the remaining props directly in template expressions. Apply this guideline to Vue components across the codebase (all .vue files).
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vuesrc/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vuesrc/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
📚 Learning: 2025-12-18T02:07:38.870Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vuesrc/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
📚 Learning: 2025-12-11T03:55:51.755Z
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:51.755Z
Learning: In Vue components under src/renderer/extensions/vueNodes (e.g., ImagePreview.vue and LGraphNode.vue), implement image gallery keyboard navigation so that it responds to the node's focus state rather than requiring focus inside the image preview wrapper. Achieve this by wiring keyEvent handling at the node focus level and injecting or propagating key events (arrow keys) to the gallery when the node is focused/selected. This improves accessibility and aligns navigation with node-level focus behavior.
Applied to files:
src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
🔇 Additional comments (2)
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue (2)
12-12: Reconsider the important modifiers on utility classes.The classes
min-w-full! text-[.625rem]!use important modifiers (!), which can make future style overrides more difficult and reduce maintainability.If these important modifiers are necessary to override styles from NodePreview or its children, consider whether the base styles should be adjusted instead to avoid needing
!important.⛔ Skipped due to learnings
Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7559 File: .storybook/preview.ts:61-61 Timestamp: 2025-12-16T17:30:29.719Z Learning: In .storybook/preview.ts for the Comfy-Org/ComfyUI_frontend repository, using `document.body.classList.add('[&_*]:!font-inter')` is the correct approach for applying the Inter font to all Storybook story elements. The simpler `font-inter` class alone does not work in this context. This runtime arbitrary variant pattern is valid and should not be flagged as an issue.Learnt from: benceruleanlu Repo: Comfy-Org/ComfyUI_frontend PR: 7297 File: src/components/actionbar/ComfyActionbar.vue:33-43 Timestamp: 2025-12-09T21:40:19.792Z Learning: In the Comfy-Org/ComfyUI_frontend repository, inline Tailwind CSS class strings, even when long, are acceptable and preferred over extracting them to computed properties when the classes are static. This is a common Tailwind pattern and doesn't need to be flagged as a readability issue.Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7598 File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131 Timestamp: 2025-12-18T02:07:38.870Z Learning: Comfy-Org/ComfyUI_frontend uses Tailwind CSS v4 utilities, including the new “safe” overflow-alignment classes. Do not flag items-center-safe, justify-*-safe, or place-*-safe utilities as invalid in src/**/*.vue or stories.Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-12-17T01:01:03.609Z Learning: Applies to src/**/*.vue : Use Tailwind 4 utility classes for styling - avoid `<style>` blocks
9-9: Consider refactoring the positioning pattern to reduce parent-child coupling.The arbitrary variant
[&>.lg-node-preview]:relativeoverrides the child component's absolute positioning to address potential layout issues from the parent'szoom: 0.5. While this may be necessary for the zoom effect to work correctly, it creates brittle coupling—if the child component's class structure changes, this override silently breaks.Test rendering at different viewport sizes and verify the relative positioning doesn't unintentionally alter the layout hierarchy. Consider whether the positioning issue can be resolved by handling it within LGraphNodePreview itself or through component props rather than parent-level class selectors.
⛔ Skipped due to learnings
Learnt from: simula-r Repo: Comfy-Org/ComfyUI_frontend PR: 7252 File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158 Timestamp: 2025-12-11T03:55:57.926Z Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7559 File: .storybook/preview.ts:61-61 Timestamp: 2025-12-16T17:30:29.719Z Learning: In .storybook/preview.ts for the Comfy-Org/ComfyUI_frontend repository, using `document.body.classList.add('[&_*]:!font-inter')` is the correct approach for applying the Inter font to all Storybook story elements. The simpler `font-inter` class alone does not work in this context. This runtime arbitrary variant pattern is valid and should not be flagged as an issue.
src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
Outdated
Show resolved
Hide resolved
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
Outdated
Show resolved
Hide resolved
dosubot
bot
added
size:S
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue(1 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
src/**/*.vue: Vue 3 SFCs must use Composition API only - no Options API
Use<script setup lang="ts">for component logic
Use Tailwind 4 utility classes for styling - avoid<style>blocks
Usecn()utility from@/utils/tailwindUtilto merge Tailwind class names - never use:class="[]"syntax
Never use thedark:Tailwind variant - use semantic values fromstyle.csstheme instead (e.g.,bg-node-component-surface)
Use Vue 3.5+ TypeScript style default prop declaration with reactive destructuring - preferuseModelto prop/emit pairs, do not usewithDefaults
Do not import Vue macros unnecessarily
Use vue-i18n in composition API for string literals - place translation entries insrc/locales/en/main.json
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Avoid new usage of PrimeVue components
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
src/**/*.{vue,ts}: Avoid usingrefandwatchtogether - usecomputedinstead if possible
Do not addrefif a prop would suffice; do not addcomputedif the ref/prop directly would work; usewatchonly whencomputedwon't accomplish the goal
Leverage VueUse functions for performance-enhancing styles
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
src/**/*.{ts,tsx,vue}: ESLint rules: Vue + TS rules, no floating promises, unused imports disallowed, i18n raw text restrictions in templates
Use es-toolkit for utility functions
Avoid mutable state - prefer immutability and assignment at point of declaration
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
src/**/*.{js,ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively - no new JavaScript files
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
src/**/*.{ts,tsx,vue,js}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx,vue,js}: Indent with 2 spaces, use single quotes, no trailing semicolons, line width 80 - see.prettierrc
Sort and group imports by plugin, runpnpm formatbefore committing
Files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
🧠 Learnings (13)
📓 Common learnings
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:57.926Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.
📚 Learning: 2025-12-11T03:55:57.926Z
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:57.926Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panels
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-12-17T01:01:03.609Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.vue : Use Tailwind 4 utility classes for styling - avoid `<style>` blocks
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-12-18T02:07:38.870Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-12-17T01:01:03.609Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.vue : Never use the `dark:` Tailwind variant - use semantic values from `style.css` theme instead (e.g., `bg-node-component-surface`)
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-12-09T21:40:12.361Z
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.
Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-12-17T01:01:03.609Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.vue : Use `cn()` utility from `@/utils/tailwindUtil` to merge Tailwind class names - never use `:class="[]"` syntax
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-12-16T17:30:29.719Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7559
File: .storybook/preview.ts:61-61
Timestamp: 2025-12-16T17:30:29.719Z
Learning: In .storybook/preview.ts for the Comfy-Org/ComfyUI_frontend repository, using `document.body.classList.add('[&_*]:!font-inter')` is the correct approach for applying the Inter font to all Storybook story elements. The simpler `font-inter` class alone does not work in this context. This runtime arbitrary variant pattern is valid and should not be flagged as an issue.
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-12-16T22:26:49.463Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.vue:17-17
Timestamp: 2025-12-16T22:26:49.463Z
Learning: In Vue 3.5+ with <script setup>, when using defineProps<Props>() with partial destructuring (e.g., const { as = 'button', class: customClass = '' } = defineProps<Props>() ), props that are not destructured (e.g., variant, size) stay accessible by name in the template scope. This pattern is valid: you can destructure only a subset of props for convenience while referencing the remaining props directly in template expressions. Apply this guideline to Vue components across the codebase (all .vue files).
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
Outdated
Show resolved
Hide resolved
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 12/19/2025, 07:43:05 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/19/2025, 07:34:18 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.21 MB (baseline 3.21 MB) • ⚪ 0 BMain entry bundles and manifests
Graph Workspace — 996 kB (baseline 996 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Panels & Settings — 297 kB (baseline 297 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
UI Components — 184 kB (baseline 184 kB) • ⚪ 0 BReusable component library chunks
Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Utilities & Hooks — 1.86 kB (baseline 1.86 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Vendor & Third-Party — 8.46 MB (baseline 8.46 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.44 MB (baseline 3.44 MB) • ⚪ 0 BBundles that do not match a named category
|
christian-byrne
added
needs-backport
## Summary - Add `lg-node-preview` class to LGraphNodePreview for CSS targeting - Override absolute positioning in NodesTabPanel to make Vue mode previews fit within the container - Apply zoom scaling (0.5) to fit node previews in the manager info panel ## Test plan - [ ] Open manager panel and select a node pack with nodes - [ ] Verify node previews display correctly with Vue mode enabled - [ ] Verify previews fit within the panel bounds without overflow ## Before https://github.com/user-attachments/assets/8cd3a201-600d-4f31-9b79-4a480a07d998 ## After https://github.com/user-attachments/assets/b88ee7f2-5e6d-4913-b5a6-fa5fbe3b4dde ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7611-fix-node-preview-Vue-mode-sizing-in-manager-panel-2cd6d73d36508141843cea046f104746) by [Unito](https://www.unito.io)
github-actions
bot
removed
the
needs-backport
…el (#7640) Backport of #7611 to `core/1.35` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7640-backport-core-1-35-fix-node-preview-Vue-mode-sizing-in-manager-panel-2ce6d73d365081759ef5c8e05ff92553) by [Unito](https://www.unito.io) Co-authored-by: Johnpaul Chiwetelu <[email protected]>
## Summary - Add `lg-node-preview` class to LGraphNodePreview for CSS targeting - Override absolute positioning in NodesTabPanel to make Vue mode previews fit within the container - Apply zoom scaling (0.5) to fit node previews in the manager info panel ## Test plan - [ ] Open manager panel and select a node pack with nodes - [ ] Verify node previews display correctly with Vue mode enabled - [ ] Verify previews fit within the panel bounds without overflow ## Before https://github.com/user-attachments/assets/8cd3a201-600d-4f31-9b79-4a480a07d998 ## After https://github.com/user-attachments/assets/b88ee7f2-5e6d-4913-b5a6-fa5fbe3b4dde ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7611-fix-node-preview-Vue-mode-sizing-in-manager-panel-2cd6d73d36508141843cea046f104746) by [Unito](https://www.unito.io)
Summary
lg-node-previewclass to LGraphNodePreview for CSS targetingTest plan
Before
Screen.Recording.2025-12-18.at.08.09.13.mov
After
Screen.Recording.2025-12-18.at.08.22.00.mov
┆Issue is synchronized with this Notion page by Unito