mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-04 23:20:07 +00:00
3db1b153f3
## Summary Implemented responsive topbar badges with three display modes (full, compact, icon-only) using Tailwind breakpoints and PrimeVue Popover interactions. https://github.com/user-attachments/assets/57912253-b1b5-4a68-953e-0be942ff09c4 ## Changes - **What**: Replaced hardcoded 880px breakpoint with [Tailwind breakpoints](https://tailwindcss.com/docs/responsive-design) via [@vueuse/core](https://vueuse.org/core/useBreakpoints/) - `xl (≥1280px)`: Full display (icon + label + text) - `lg (≥1024px)`: Compact (icon + label, click for popover) - `<lg (<1024px)`: Icon-only (icon/label/dot, click for popover) - **What**: Added `CloudBadge` component to isolate static "Comfy Cloud BETA" badge from runtime store badges - **What**: Added `backgroundColor` prop to support different contexts (topbar vs dialog backgrounds) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6291-make-topbar-badges-responsive-and-fix-server-health-badges-showing-on-unrelated-dialogs-2986d73d365081d294e5c9a7af1aafb2) by [Unito](https://www.unito.io)