[backport rh-test] make topbar badges responsive and fix server health badges showing on unrelated dialogs (#6297)

Backport of #6291 to `rh-test`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6297-backport-rh-test-make-topbar-badges-responsive-and-fix-server-health-badges-showing-on--2986d73d365081d1ba58fb40eb8d2776)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Co-authored-by: GitHub Action <action@github.com>

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'