Skip to content

feat: mobile breakpoint for vue nodes banner #6942

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Nov 26, 2025
Merged

feat: mobile breakpoint for vue nodes banner #6942

merged 2 commits into from
Nov 26, 2025

Conversation

@simula-r
Copy link
Contributor

@simula-r simula-r commented Nov 25, 2025 •
edited by sync-by-unito bot
Loading

Summary

Add mobile breakpoint to vue nodes banner

Changes

  • What: main.json and vue nodes banner

Screenshots (if applicable)

image image

┆Issue is synchronized with this Notion page by Unito

@dosubot dosubot bot added the size:S This PR changes 10-29 lines, ignoring generated files. label Nov 25, 2025
@coderabbitai
Copy link

coderabbitai bot commented Nov 25, 2025 •
edited
Loading

📝 Walkthrough

Walkthrough

This PR restructures the TryVueNodeBanner component to display banner content as separate title and description fields with responsive visibility. The banner message is split into distinct translation keys, and the container gains a text-small class. No changes to visibility or dismissal logic.

Changes

Cohort / File(s) Summary
Banner UI Component
src/components/topbar/TryVueNodeBanner.vue		 Updates message structure from single field to title and description; adds responsive layout where description is hidden on small screens and visible on md+ screens; container gains text-sm class.
Localization
src/locales/en/main.json		 Restructures vueNodesBanner from single "message" field to separate "title" (Introducing Nodes 2.0) and "desc" fields; "tryItOut" field unchanged.

Possibly related PRs

  • ComfyUI_frontend#6898: Modifies the same TryVueNodeBanner component and related locale entries, suggesting coordinated updates to banner messaging and branding.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/vue-nodes-mobile-banner
📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5fa0295 and ec5fd2d.

📒 Files selected for processing (2)
  • src/components/topbar/TryVueNodeBanner.vue (1 hunks)
  • src/locales/en/main.json (2 hunks)
🧰 Additional context used
📓 Path-based instructions (15)
**/*.vue

📄 CodeRabbit inference engine (.cursorrules)

**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)

Never use :class="[]" to merge class names - always use import { cn } from '@/utils/tailwindUtil' for class merging in Vue templates

**/*.vue: Use TypeScript with Vue 3 Single File Components (.vue files)
Name Vue components in PascalCase (e.g., MenuHamburger.vue)

Files:

  • src/components/topbar/TryVueNodeBanner.vue
**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json

Files:

  • src/components/topbar/TryVueNodeBanner.vue
**/*.{ts,tsx,js,vue}

📄 CodeRabbit inference engine (.cursorrules)

Implement proper error handling in components and services

**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in .prettierrc
Organize imports by sorting and grouping by plugin, and run pnpm format before committing

Files:

  • src/components/topbar/TryVueNodeBanner.vue
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

Files:

  • src/components/topbar/TryVueNodeBanner.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

Files:

  • src/components/topbar/TryVueNodeBanner.vue
**/*.{ts,tsx,js,jsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use camelCase for variable and setting names in TypeScript/Vue files

Files:

  • src/components/topbar/TryVueNodeBanner.vue
**/*.{vue,html}

📄 CodeRabbit inference engine (CLAUDE.md)

Never use dark: or dark-theme: Tailwind variants - instead use semantic values from style.css theme, e.g. bg-node-component-surface

Files:

  • src/components/topbar/TryVueNodeBanner.vue
**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,vue}: Use const settingStore = useSettingStore() and settingStore.get('Comfy.SomeSetting') to retrieve settings in TypeScript/Vue files
Use await settingStore.set('Comfy.SomeSetting', newValue) to update settings in TypeScript/Vue files
Check server capabilities using api.serverSupportsFeature('feature_name') before using enhanced features
Use api.getServerFeature('config_name', defaultValue) to retrieve server feature configuration

Enforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates

Files:

  • src/components/topbar/TryVueNodeBanner.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

Files:

  • src/components/topbar/TryVueNodeBanner.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/components/topbar/TryVueNodeBanner.vue
src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

  • src/components/topbar/TryVueNodeBanner.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/components/topbar/TryVueNodeBanner.vue
src/components/**/*.vue

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components

Files:

  • src/components/topbar/TryVueNodeBanner.vue
src/components/**/*.{vue,css}

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package

Files:

  • src/components/topbar/TryVueNodeBanner.vue
src/components/**/*.{vue,ts,js}

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings

Files:

  • src/components/topbar/TryVueNodeBanner.vue
🧠 Learnings (3)
📓 Common learnings 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.vue : Implement responsive design with Tailwind CSS

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 InlineMessage component with Message
📚 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 InlineMessage component with Message

Applied to files:

  • src/components/topbar/TryVueNodeBanner.vue
📚 Learning: 2025-11-24T19:47:34.324Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{components,composables}/**/*.{ts,tsx,vue} : Use vue-i18n for ALL user-facing strings by adding them to `src/locales/en/main.json`

Applied to files:

  • src/locales/en/main.json
⏰ 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)
  • GitHub Check: setup
  • GitHub Check: lint-and-format
  • GitHub Check: collect
  • GitHub Check: test
🔇 Additional comments (2)
src/locales/en/main.json (1)

2204-2208: vueNodesBanner i18n split looks consistent and correct

Splitting the banner copy into title and desc keys is clean, keeps everything localized, and matches the new Vue usage. No issues from an i18n or structure standpoint.

src/components/topbar/TryVueNodeBanner.vue (1)

6-11: Responsive banner text and i18n wiring look good

The new text-sm container plus separate title/description spans (with hidden md:inline on the desc) cleanly implement the mobile breakpoint while keeping all text localized via vueNodesBanner.title / vueNodesBanner.desc. Behavior and styles look consistent with existing patterns.

[!TIP]

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

  • Provide your own instructions using the high_level_summary_instructions setting.
  • Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
  • Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

  1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
  2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
  3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
  4. 📊 Contributor Summary — Include a Markdown table showing contributions:
    | Contributor | Lines Added | Lines Removed | Files Changed |
  5. ✔️ Additional Notes — Add any extra reviewer context.
    Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

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

@github-actions
Copy link

github-actions bot commented Nov 25, 2025 •
edited
Loading

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 11/26/2025, 01:06:51 AM UTC

📈 Summary

  • Total Tests: 495
  • Passed: 482 ✅
  • Failed: 0
  • Flaky: 4 ⚠️
  • Skipped: 9 ⏭️

📊 Test Reports by Browser

  • ✅ chromium: View Report • ✅ 473 / ❌ 0 / ⚠️ 4 / ⏭️ 9
  • ✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • ✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • ✅ mobile-chrome: View Report • ✅ 6 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

@github-actions
Copy link

github-actions bot commented Nov 25, 2025 •
edited
Loading

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 11/26/2025, 12:57:59 AM UTC

🔗 Links

🎉 Your Storybook is ready for review!

@github-actions
Copy link

github-actions bot commented Nov 25, 2025 •
edited
Loading

Bundle Size Report

Summary

  • Raw size: 17 MB baseline 17 MB — 🔴 +167 B
  • Gzip: 3.36 MB baseline 3.36 MB — 🔴 +29 B
  • Brotli: 2.58 MB baseline 2.58 MB — 🟢 -227 B
  • Bundles: 93 current • 93 baseline • 38 added / 38 removed

Category Glance
Graph Workspace 🔴 +158 B (944 kB) · App Entry Points 🔴 +9 B (3.18 MB) · Vendor & Third-Party ⚪ 0 B (8.56 MB) · Other ⚪ 0 B (3.84 MB) · Panels & Settings ⚪ 0 B (298 kB) · UI Components ⚪ 0 B (139 kB) · + 3 more

Per-category breakdown
App Entry Points — 3.18 MB (baseline 3.18 MB) • 🔴 +9 B

Main entry bundles and manifests

File Before After Δ Raw Δ Gzip Δ Brotli
assets/index-BIfXpZYo.js (new) — 2.95 MB 🔴 +2.95 MB 🔴 +614 kB 🔴 +466 kB
assets/index-D48FzoB6.js (removed) 2.95 MB — 🟢 -2.95 MB 🟢 -614 kB 🟢 -467 kB
assets/index-DY2DE--P.js (new) — 227 kB 🔴 +227 kB 🔴 +48.6 kB 🔴 +40 kB
assets/index-sX64gFEr.js (removed) 227 kB — 🟢 -227 kB 🟢 -48.6 kB 🟢 -40 kB
assets/index-CdpN812c.js (removed) 345 B — 🟢 -345 B 🟢 -246 B 🟢 -237 B
assets/index-Cpd1sDQG.js (new) — 345 B 🔴 +345 B 🔴 +244 B 🔴 +209 B

Status: 3 added / 3 removed

Graph Workspace — 944 kB (baseline 944 kB) • 🔴 +158 B

Graph editor runtime, canvas, workflow orchestration

File Before After Δ Raw Δ Gzip Δ Brotli
assets/GraphView-BmWuX0Vc.js (new) — 944 kB 🔴 +944 kB 🔴 +183 kB 🔴 +140 kB
assets/GraphView-G_Ht0XUL.js (removed) 944 kB — 🟢 -944 kB 🟢 -183 kB 🟢 -140 kB

Status: 1 added / 1 removed

Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 B

Top-level views, pages, and routed surfaces

File Before After Δ Raw Δ Gzip Δ Brotli
assets/UserSelectView-B_3TUNaE.js (removed) 6.54 kB — 🟢 -6.54 kB 🟢 -2.14 kB 🟢 -1.89 kB
assets/UserSelectView-D0OaFeET.js (new) — 6.54 kB 🔴 +6.54 kB 🔴 +2.14 kB 🔴 +1.9 kB

Status: 1 added / 1 removed

Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 B

Configuration panels, inspectors, and settings screens

File Before After Δ Raw Δ Gzip Δ Brotli
assets/CreditsPanel-Ta8OaIni.js (removed) 21.4 kB — 🟢 -21.4 kB 🟢 -5.15 kB 🟢 -4.5 kB
assets/CreditsPanel-TcmV-uFw.js (new) — 21.4 kB 🔴 +21.4 kB 🔴 +5.15 kB 🔴 +4.5 kB
assets/KeybindingPanel-C379S5ZM.js (new) — 13.6 kB 🔴 +13.6 kB 🔴 +3.42 kB 🔴 +3 kB
assets/KeybindingPanel-NgrgAmAp.js (removed) 13.6 kB — 🟢 -13.6 kB 🟢 -3.42 kB 🟢 -3.01 kB
assets/ExtensionPanel-BSmzf3Af.js (new) — 10.4 kB 🔴 +10.4 kB 🔴 +2.48 kB 🔴 +2.17 kB
assets/ExtensionPanel-DzKUFrXu.js (removed) 10.4 kB — 🟢 -10.4 kB 🟢 -2.48 kB 🟢 -2.17 kB
assets/AboutPanel-9pDwLy7Z.js (removed) 9.16 kB — 🟢 -9.16 kB 🟢 -2.46 kB 🟢 -2.21 kB
assets/AboutPanel-BsFwdRUv.js (new) — 9.16 kB 🔴 +9.16 kB 🔴 +2.46 kB 🔴 +2.21 kB
assets/ServerConfigPanel-BOx-F7t7.js (new) — 6.56 kB 🔴 +6.56 kB 🔴 +1.83 kB 🔴 +1.63 kB
assets/ServerConfigPanel-BpZEpbuc.js (removed) 6.56 kB — 🟢 -6.56 kB 🟢 -1.83 kB 🟢 -1.63 kB
assets/UserPanel-CReYCW_r.js (new) — 6.23 kB 🔴 +6.23 kB 🔴 +1.72 kB 🔴 +1.51 kB
assets/UserPanel-DDbFAXfu.js (removed) 6.23 kB — 🟢 -6.23 kB 🟢 -1.72 kB 🟢 -1.51 kB
assets/settings-BXTtSH4O.js 33.3 kB 33.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-C9Pzn-NG.js 25.2 kB 25.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-CCy2fA_h.js 27.3 kB 27.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-CQpqEFfl.js 26.6 kB 26.6 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DHcnxypw.js 21.7 kB 21.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DhFTK9fY.js 25.1 kB 25.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DlT4t_ui.js 25.9 kB 25.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DRgSrIdD.js 24.2 kB 24.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-tjkeqiZq.js 21.1 kB 21.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 6 added / 6 removed

UI Components — 139 kB (baseline 139 kB) • ⚪ 0 B

Reusable component library chunks

File Before After Δ Raw Δ Gzip Δ Brotli
assets/Load3D.vue_vue_type_script_setup_true_lang-BVke6ANH.js (new) — 53.9 kB 🔴 +53.9 kB 🔴 +8.52 kB 🔴 +7.32 kB
assets/Load3D.vue_vue_type_script_setup_true_lang-CL6gZJ6S.js (removed) 53.9 kB — 🟢 -53.9 kB 🟢 -8.52 kB 🟢 -7.32 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-Deplz3gP.js (removed) 46.9 kB — 🟢 -46.9 kB 🟢 -10.1 kB 🟢 -8.77 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-DuDExvjK.js (new) — 46.9 kB 🔴 +46.9 kB 🔴 +10.1 kB 🔴 +8.77 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-CBjDIEOk.js (removed) 12.8 kB — 🟢 -12.8 kB 🟢 -3.35 kB 🟢 -2.96 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-DVapA-su.js (new) — 12.8 kB 🔴 +12.8 kB 🔴 +3.35 kB 🔴 +2.97 kB
assets/ComfyQueueButton-B-ce0tOv.js (removed) 7.73 kB — 🟢 -7.73 kB 🟢 -2.2 kB 🟢 -1.95 kB
assets/ComfyQueueButton-TAj_Du_F.js (new) — 7.73 kB 🔴 +7.73 kB 🔴 +2.2 kB 🔴 +1.95 kB
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-Bre8WloN.js (removed) 2.16 kB — 🟢 -2.16 kB 🟢 -825 B 🟢 -721 B
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-CtGfVmoF.js (new) — 2.16 kB 🔴 +2.16 kB 🔴 +826 B 🔴 +722 B
assets/MediaTitle.vue_vue_type_script_setup_true_lang-bnTYXX18.js (removed) 897 B — 🟢 -897 B 🟢 -505 B 🟢 -463 B
assets/MediaTitle.vue_vue_type_script_setup_true_lang-CMhjBT4a.js (new) — 897 B 🔴 +897 B 🔴 +503 B 🔴 +430 B
assets/LazyImage.vue_vue_type_script_setup_true_lang-DNzEEbAp.js 10.8 kB 10.8 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/UserAvatar.vue_vue_type_script_setup_true_lang-B4qnwhJi.js 1.34 kB 1.34 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetButton-0Kc6B4DO.js 2.04 kB 2.04 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 6 added / 6 removed

Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 B

Stores, services, APIs, and repositories

File Before After Δ Raw Δ Gzip Δ Brotli
assets/keybindingService-B2EwpY0K.js (removed) 7.51 kB — 🟢 -7.51 kB 🟢 -1.84 kB 🟢 -1.58 kB
assets/keybindingService-CTDAvEC2.js (new) — 7.51 kB 🔴 +7.51 kB 🔴 +1.83 kB 🔴 +1.58 kB
assets/audioService-BZy7thD_.js (new) — 2.2 kB 🔴 +2.2 kB 🔴 +962 B 🔴 +826 B
assets/audioService-DvB3-2c3.js (removed) 2.2 kB — 🟢 -2.2 kB 🟢 -962 B 🟢 -831 B
assets/serverConfigStore-NS6ibDz2.js 2.83 kB 2.83 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 2 added / 2 removed

Utilities & Hooks — 2.94 kB (baseline 2.94 kB) • ⚪ 0 B

Helpers, composables, and utility bundles

File Before After Δ Raw Δ Gzip Δ Brotli
assets/audioUtils-CmH0-__r.js (removed) 1.41 kB — 🟢 -1.41 kB 🟢 -650 B 🟢 -544 B
assets/audioUtils-Dkl8TQFb.js (new) — 1.41 kB 🔴 +1.41 kB 🔴 +652 B 🔴 +543 B
assets/mathUtil-CTARWQ-l.js 1.07 kB 1.07 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeFilterUtil-CXKCRJ-m.js 460 B 460 B ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 1 added / 1 removed

Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 B

External libraries and shared vendor chunks

File Before After Δ Raw Δ Gzip Δ Brotli
assets/vendor-chart-Bc7F9itp.js 452 kB 452 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-other-BUi7FCLE.js 3.98 MB 3.98 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-primevue-DTsA3ueY.js 1.96 MB 1.96 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-three-aR6ntw5X.js 1.37 MB 1.37 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-tiptap-CaFtSsrn.js 232 kB 232 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-vue-xOQVyCMJ.js 160 kB 160 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-xterm-BZLod3g9.js 407 kB 407 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
Other — 3.84 MB (baseline 3.84 MB) • ⚪ 0 B

Bundles that do not match a named category

File Before After Δ Raw Δ Gzip Δ Brotli
assets/WidgetRecordAudio-DLrwVdDf.js (new) — 20.5 kB 🔴 +20.5 kB 🔴 +5.26 kB 🔴 +4.66 kB
assets/WidgetRecordAudio-DUM733ta.js (removed) 20.5 kB — 🟢 -20.5 kB 🟢 -5.25 kB 🟢 -4.64 kB
assets/AudioPreviewPlayer-BNdqr6Im.js (new) — 13.6 kB 🔴 +13.6 kB 🔴 +3.42 kB 🔴 +3.07 kB
assets/AudioPreviewPlayer-DFhOqfm8.js (removed) 13.6 kB — 🟢 -13.6 kB 🟢 -3.42 kB 🟢 -3.08 kB
assets/WidgetGalleria-BwH5YfAu.js (removed) 4.1 kB — 🟢 -4.1 kB 🟢 -1.45 kB 🟢 -1.31 kB
assets/WidgetGalleria-DSYgEdiV.js (new) — 4.1 kB 🔴 +4.1 kB 🔴 +1.45 kB 🔴 +1.31 kB
assets/WidgetColorPicker-Crsh8C_x.js (new) — 3.41 kB 🔴 +3.41 kB 🔴 +1.38 kB 🔴 +1.23 kB
assets/WidgetColorPicker-WNKTB2tH.js (removed) 3.41 kB — 🟢 -3.41 kB 🟢 -1.38 kB 🟢 -1.23 kB
assets/WidgetMarkdown-C3mtz1zo.js (new) — 3.16 kB 🔴 +3.16 kB 🔴 +1.31 kB 🔴 +1.15 kB
assets/WidgetMarkdown-CWineY58.js (removed) 3.16 kB — 🟢 -3.16 kB 🟢 -1.31 kB 🟢 -1.16 kB
assets/WidgetAudioUI-CB8D07W5.js (removed) 2.82 kB — 🟢 -2.82 kB 🟢 -1.12 kB 🟢 -1.02 kB
assets/WidgetAudioUI-D3fIwVy2.js (new) — 2.82 kB 🔴 +2.82 kB 🔴 +1.12 kB 🔴 +1.02 kB
assets/WidgetTextarea-BUikwG05.js (new) — 2.54 kB 🔴 +2.54 kB 🔴 +1.04 kB 🔴 +907 B
assets/WidgetTextarea-J8IxDnwC.js (removed) 2.54 kB — 🟢 -2.54 kB 🟢 -1.04 kB 🟢 -911 B
assets/WidgetInputText-jVONytVY.js (removed) 1.99 kB — 🟢 -1.99 kB 🟢 -916 B 🟢 -848 B
assets/WidgetInputText-WXe55oyH.js (new) — 1.99 kB 🔴 +1.99 kB 🔴 +916 B 🔴 +853 B
assets/WidgetToggleSwitch-C4CwjhXJ.js (removed) 1.76 kB — 🟢 -1.76 kB 🟢 -833 B 🟢 -730 B
assets/WidgetToggleSwitch-D01Cqgdt.js (new) — 1.76 kB 🔴 +1.76 kB 🔴 +833 B 🔴 +730 B
assets/MediaImageBottom-BC5uhLOX.js (new) — 1.57 kB 🔴 +1.57 kB 🔴 +737 B 🔴 +645 B
assets/MediaImageBottom-BOKoE8Wh.js (removed) 1.57 kB — 🟢 -1.57 kB 🟢 -742 B 🟢 -645 B
assets/MediaAudioBottom-DevpzsAT.js (new) — 1.52 kB 🔴 +1.52 kB 🔴 +739 B 🔴 +657 B
assets/MediaAudioBottom-DJuRPZf6.js (removed) 1.52 kB — 🟢 -1.52 kB 🟢 -740 B 🟢 -658 B
assets/MediaVideoBottom-DKgJzO9w.js (removed) 1.52 kB — 🟢 -1.52 kB 🟢 -741 B 🟢 -656 B
assets/MediaVideoBottom-DxqVcSQ4.js (new) — 1.52 kB 🔴 +1.52 kB 🔴 +739 B 🔴 +656 B
assets/Media3DBottom-5EwJUO56.js (removed) 1.5 kB — 🟢 -1.5 kB 🟢 -731 B 🟢 -649 B
assets/Media3DBottom-CQfgOKBF.js (new) — 1.5 kB 🔴 +1.5 kB 🔴 +731 B 🔴 +650 B
assets/Media3DTop-D5dDgfcT.js (new) — 1.49 kB 🔴 +1.49 kB 🔴 +765 B 🔴 +654 B
assets/Media3DTop-t2Pi2aET.js (removed) 1.49 kB — 🟢 -1.49 kB 🟢 -766 B 🟢 -656 B
assets/WidgetSelect-BC8dqw-l.js (removed) 655 B — 🟢 -655 B 🟢 -342 B 🟢 -289 B
assets/WidgetSelect-C1F-C93Q.js (new) — 655 B 🔴 +655 B 🔴 +341 B 🔴 +293 B
assets/WidgetInputNumber-DYsT0stF.js (removed) 595 B — 🟢 -595 B 🟢 -330 B 🟢 -278 B
assets/WidgetInputNumber-Hxy1vSu-.js (new) — 595 B 🔴 +595 B 🔴 +327 B 🔴 +276 B
assets/Load3D-CyDtunBD.js (removed) 424 B — 🟢 -424 B 🟢 -267 B 🟢 -223 B
assets/Load3D-HbIDnJ_o.js (new) — 424 B 🔴 +424 B 🔴 +268 B 🔴 +223 B
assets/WidgetLegacy-Bg8RJXSn.js (removed) 364 B — 🟢 -364 B 🟢 -237 B 🟢 -193 B
assets/WidgetLegacy-BVF2HwIN.js (new) — 364 B 🔴 +364 B 🔴 +238 B 🔴 +194 B
assets/commands-_s-RvhJR.js 13.6 kB 13.6 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-BuUILW6P.js 13 kB 13 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-BV4R6fLx.js 14.9 kB 14.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-CLwPdnT6.js 14.2 kB 14.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-CWMchBmd.js 15.9 kB 15.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DazTQhtc.js 12.9 kB 12.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DmWrOe93.js 13.7 kB 13.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DwiH7Kr6.js 13.8 kB 13.8 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-mS3LCNPn.js 14.5 kB 14.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-5lOBdqcC.js 84.5 kB 84.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-BOCuaVpE.js 73.4 kB 73.4 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-ClrEFGUz.js 72.4 kB 72.4 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-CyNU0iQX.js 99.3 kB 99.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-D7gwLxft.js 114 kB 114 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-DC8o4BCt.js 86.8 kB 86.8 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-DKiesCV4.js 94.3 kB 94.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Hq2q-OtB.js 83.6 kB 83.6 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-USAlAlnj.js 82 kB 82 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaAudioTop-ClVHGsSJ.js 1.46 kB 1.46 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaImageTop-BTxsJ9KT.js 1.68 kB 1.68 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaVideoTop-P2MYHlgs.js 2.76 kB 2.76 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-_Px5dSNW.js 306 kB 306 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-7z21KPoS.js 285 kB 285 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-BWKZzBPK.js 346 kB 346 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-CGbgH4Yl.js 320 kB 320 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-CjjjdWkV.js 313 kB 313 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-CVrNtxvj.js 288 kB 288 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-DLRSA0IK.js 309 kB 309 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-DQV2gnwA.js 372 kB 372 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-ofqLG5vz.js 310 kB 310 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetChart-DaKVD7Py.js 2.48 kB 2.48 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetImageCompare-DE5-CeXh.js 2.21 kB 2.21 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/widgetPropFilter-BIbGSUAt.js 1.28 kB 1.28 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 18 added / 18 removed

AustinMroz
AustinMroz approved these changes Nov 26, 2025
View reviewed changes
Copy link
Collaborator

@AustinMroz AustinMroz left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super nit: When close to the cutoff resolution, the x button will overlap with the "try it out" button.

  • (From testing, the x button had priority over "try it out")
image

@christian-byrne christian-byrne added needs-backport Fix/change that needs to be cherry-picked to the current feature freeze branch 1.32 cloud/1.32 labels Nov 26, 2025
@christian-byrne christian-byrne merged commit fcfb543 into main Nov 26, 2025
37 of 39 checks passed
@christian-byrne christian-byrne deleted the feat/vue-nodes-mobile-banner branch November 26, 2025 01:18
github-actions bot pushed a commit that referenced this pull request Nov 26, 2025
@simula-r @github-actions
feat: mobile breakpoint for vue nodes banner (#6942)
7b9fe0a 
## Summary

Add mobile breakpoint to vue nodes banner

## Changes

- **What**: main.json and vue nodes banner

## Screenshots (if applicable)

<img width="500" height="615" alt="image"
src="https://github.com/user-attachments/assets/fd8cc621-c335-41c9-bbee-4ec0ae04b226"
/>
<img width="980" height="615" alt="image"
src="https://github.com/user-attachments/assets/30e17fc2-fc91-44a3-b9f0-85d5146e861b"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6942-feat-mobile-breakpoint-for-vue-nodes-banner-2b66d73d36508139b69afd7e7134b72e)
by [Unito](https://www.unito.io)
github-actions bot pushed a commit that referenced this pull request Nov 26, 2025
@simula-r @github-actions
feat: mobile breakpoint for vue nodes banner (#6942)
da8c437 
## Summary

Add mobile breakpoint to vue nodes banner

## Changes

- **What**: main.json and vue nodes banner

## Screenshots (if applicable)

<img width="500" height="615" alt="image"
src="https://github.com/user-attachments/assets/fd8cc621-c335-41c9-bbee-4ec0ae04b226"
/>
<img width="980" height="615" alt="image"
src="https://github.com/user-attachments/assets/30e17fc2-fc91-44a3-b9f0-85d5146e861b"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6942-feat-mobile-breakpoint-for-vue-nodes-banner-2b66d73d36508139b69afd7e7134b72e)
by [Unito](https://www.unito.io)
@comfy-pr-bot comfy-pr-bot mentioned this pull request Nov 26, 2025
Merged
@comfy-pr-bot
Copy link
Member

comfy-pr-bot commented Nov 26, 2025

@simula-r Successfully backported to #6947

@comfy-pr-bot comfy-pr-bot mentioned this pull request Nov 26, 2025
Merged
@comfy-pr-bot
Copy link
Member

comfy-pr-bot commented Nov 26, 2025

@simula-r Successfully backported to #6948

@github-actions github-actions bot removed the needs-backport Fix/change that needs to be cherry-picked to the current feature freeze branch label Nov 26, 2025
christian-byrne pushed a commit that referenced this pull request Nov 26, 2025
@comfy-pr-bot @simula-r
[backport cloud/1.32] feat: mobile breakpoint for vue nodes banner (#…
fbf5e6d 
…6948)

Backport of #6942 to `cloud/1.32`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6948-backport-cloud-1-32-feat-mobile-breakpoint-for-vue-nodes-banner-2b76d73d365081b18d3cc78c7301f613)
by [Unito](https://www.unito.io)

Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
christian-byrne pushed a commit that referenced this pull request Nov 26, 2025
@comfy-pr-bot @simula-r
[backport core/1.32] feat: mobile breakpoint for vue nodes banner (#6947
487ce3d 
)

Backport of #6942 to `core/1.32`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6947-backport-core-1-32-feat-mobile-breakpoint-for-vue-nodes-banner-2b76d73d36508198aa06d6ccbedb2f1b)
by [Unito](https://www.unito.io)

Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@AustinMroz AustinMroz AustinMroz approved these changes

@christian-byrne christian-byrne christian-byrne approved these changes

@Yorha4D Yorha4D Awaiting requested review from Yorha4D Yorha4D is a code owner

@KarryCharon KarryCharon Awaiting requested review from KarryCharon KarryCharon is a code owner

@shinshin86 shinshin86 Awaiting requested review from shinshin86 shinshin86 is a code owner

@pythongosssss pythongosssss Awaiting requested review from pythongosssss pythongosssss is a code owner

Assignees

No one assigned

Labels

1.32 cloud/1.32 size:S This PR changes 10-29 lines, ignoring generated files.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@simula-r @comfy-pr-bot @AustinMroz @christian-byrne