make subscribe-to-run button responsive (#6581)

## 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)
This commit is contained in:
Christian Byrne
2025-11-04 13:33:22 -08:00
committed by GitHub
parent 6c9743c1a6
commit a4fc68a9eb
2 changed files with 18 additions and 3 deletions

View File

@@ -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"

View File

@@ -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 = () => {