make topbar badges responsive and fix server health badges showing on unrelated dialogs (#6291)

## 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)

src/platform/cloud/subscription/components/SubscriptionPanel.vue

@@ -5,7 +5,7 @@
         <h2 class="text-2xl">
           {{ $t('subscription.title') }}
         </h2>
-        <TopbarBadges reverse-order />
+        <CloudBadge reverse-order />
       </div>
 
       <div class="grow overflow-auto">
@@ -196,7 +196,7 @@ import Button from 'primevue/button'
 import TabPanel from 'primevue/tabpanel'
 import { computed, onMounted, ref } from 'vue'
 
-import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
+import CloudBadge from '@/components/topbar/CloudBadge.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'

src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue

@@ -25,10 +25,10 @@
             <div class="text-sm text-muted">
               {{ $t('subscription.required.title') }}
             </div>
-            <TopbarBadges
+            <CloudBadge
               reverse-order
               no-padding
-              text-class="!text-sm !font-normal"
+              background-color="var(--p-dialog-background)"
             />
           </div>
 
@@ -49,7 +49,7 @@
 </template>
 
 <script setup lang="ts">
-import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
+import CloudBadge from '@/components/topbar/CloudBadge.vue'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'