From a4fc68a9eb45b60d5d6fc91b6caa7961cc8aab58 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Tue, 4 Nov 2025 13:33:22 -0800
Subject: [PATCH] make subscribe-to-run button responsive (#6581)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Change to just "Subscribe" on mobile breakpoint.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6581-make-subscribe-to-run-button-responsive-2a16d73d365081e3a776cde0290432f3)
by [Unito](https://www.unito.io)
---
 src/locales/en/main.json                       |  3 ++-
 .../subscription/components/SubscribeToRun.vue | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 13da80acc..38f9dc244 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1696,7 +1696,8 @@
       "waitingForSubscription": "Complete your subscription in the new tab. We'll automatically detect when you're done!",
       "subscribe": "Subscribe"
     },
-    "subscribeToRun": "Subscribe to Run",
+    "subscribeToRun": "Subscribe",
+    "subscribeToRunFull": "Subscribe to Run",
     "subscribeNow": "Subscribe Now",
     "subscribeToComfyCloud": "Subscribe to Comfy Cloud",
     "partnerNodesCredits": "Partner Nodes credits"
diff --git a/src/platform/cloud/subscription/components/SubscribeToRun.vue b/src/platform/cloud/subscription/components/SubscribeToRun.vue
index 1f173ab34..89190789b 100644
--- a/src/platform/cloud/subscription/components/SubscribeToRun.vue
+++ b/src/platform/cloud/subscription/components/SubscribeToRun.vue
@@ -1,11 +1,11 @@
 <template>
   <Button
     v-tooltip.bottom="{
-      value: $t('subscription.subscribeToRun'),
+      value: $t('subscription.subscribeToRunFull'),
       showDelay: 600
     }"
     class="subscribe-to-run-button"
-    :label="$t('subscription.subscribeToRun')"
+    :label="buttonLabel"
     icon="pi pi-lock"
     severity="primary"
     size="small"
@@ -15,6 +15,7 @@
     }"
     :pt="{
       root: {
+        class: 'whitespace-nowrap',
         style: {
           borderColor: 'transparent'
         }
@@ -26,12 +27,25 @@
 </template>
 
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import Button from 'primevue/button'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 
+const { t } = useI18n()
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const isMdOrLarger = breakpoints.greaterOrEqual('md')
+
+const buttonLabel = computed(() =>
+  isMdOrLarger.value
+    ? t('subscription.subscribeToRunFull')
+    : t('subscription.subscribeToRun')
+)
+
 const { showSubscriptionDialog } = useSubscription()
 
 const handleSubscribeToRun = () => {