From a7f14a0b3fdf7e99cbc6879cdff0b4b2f87ff145 Mon Sep 17 00:00:00 2001 From: CodeJuggernaut <81205671+CodeJuggernaut@users.noreply.github.com> Date: Tue, 14 Jul 2026 17:35:09 -0700 Subject: [PATCH] fix(subscription): size pricing dialogs with Reka props (#13633) ## Summary Fixes the legacy personal and legacy workspace pricing dialogs so Reka owns the dialog width and the pricing table no longer overflows the default 576px frame. ## Changes - **What**: Replace the shared PrimeVue-only `style` and `pt` dialog props with Reka `renderer`, `size`, and `contentClass` props for both legacy pricing paths. - **What**: Preserve `modal: false` for the legacy workspace path so its teleported PrimeVue plan-details popover remains interactive. - **What**: Add unit coverage for both routes and assert that ignored PrimeVue shell props are no longer passed. ## Review Focus - **Regression origin**: [#12593](https://github.com/Comfy-Org/ComfyUI_frontend/pull/12593) made Reka the default dialog renderer. [#12666](https://github.com/Comfy-Org/ComfyUI_frontend/pull/12666) then added shared PrimeVue `style` and `pt` props for these pricing dialogs. Reka ignored those props and fell back to `size="md"` (`max-w-xl`, 576px). [#13092](https://github.com/Comfy-Org/ComfyUI_frontend/pull/13092) fixed the unified pricing path only and explicitly left the two legacy paths for follow-up. - **Sizing ownership**: The fix puts width on the Reka dialog frame with `size: 'full'` and `sm:max-w-7xl`. Pricing content no longer has to compensate for a narrow shell. - **Legacy workspace behavior**: `modal: false` remains intentional because the legacy table opens a PrimeVue popover teleported to `body`. - **Scope**: This PR contains only global subscription-dialog sizing. Agent side-panel behavior remains in [#13472](https://github.com/Comfy-Org/ComfyUI_frontend/pull/13472). - **Validation**: Focused tests pass (41 tests), `pnpm typecheck` passes, and targeted ESLint passes. Chrome validation at 1352x705 rendered a 1280px dialog with no horizontal overflow in both the isolated PR preview and the combined agent-panel preview. The docked agent panel remained mounted behind the modal. ## Screenshots (if applicable) - Original report and screenshots: [Slack thread](https://comfy-organization.slack.com/archives/C0A8Z4U7Y1K/p1783967281397449?thread_ts=1783966866.227439&cid=C0A8Z4U7Y1K) --- .../composables/useSubscriptionDialog.test.ts | 34 ++++++++++++++++--- .../composables/useSubscriptionDialog.ts | 28 +++++++-------- 2 files changed, 41 insertions(+), 21 deletions(-) diff --git a/src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts b/src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts index 91902df3ab..9c5e99cde7 100644 --- a/src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts +++ b/src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts @@ -79,6 +79,17 @@ vi.mock('@/platform/workspace/composables/useWorkspaceUI', () => ({ }) })) +function expectRekaPricingDialogProps( + dialogComponentProps: Record +) { + expect(dialogComponentProps).toMatchObject({ + renderer: 'reka', + size: 'full' + }) + expect(dialogComponentProps).not.toHaveProperty('style') + expect(dialogComponentProps).not.toHaveProperty('pt') +} + describe('useSubscriptionDialog', () => { beforeEach(() => { vi.clearAllMocks() @@ -136,11 +147,7 @@ describe('useSubscriptionDialog', () => { showPricingTable() const { dialogComponentProps } = mockShowLayoutDialog.mock.calls[0][0] - // Reka (the default renderer) sizes via size/contentClass; a PrimeVue - // `style` width is silently ignored and collapses the wide table to the - // default md (576px) frame. - expect(dialogComponentProps).toHaveProperty('contentClass') - expect(dialogComponentProps).not.toHaveProperty('style') + expectRekaPricingDialogProps(dialogComponentProps) }) it('defaults to the personal tab in a personal workspace', () => { @@ -174,6 +181,8 @@ describe('useSubscriptionDialog', () => { const props = mockShowLayoutDialog.mock.calls[0][0].props expect(props).toHaveProperty('onChooseTeam') + const { dialogComponentProps } = mockShowLayoutDialog.mock.calls[0][0] + expectRekaPricingDialogProps(dialogComponentProps) }) it('routes an existing per-member (legacy) team subscriber to the old team table', () => { @@ -194,6 +203,21 @@ describe('useSubscriptionDialog', () => { expect(props).not.toHaveProperty('onChooseTeam') }) + it('sizes the legacy workspace pricing dialog via Reka contentClass', () => { + mockShouldUseWorkspaceBilling.value = true + mockIsInPersonalWorkspace.value = false + mockIsLegacyTeamPlan.value = true + const { showPricingTable } = useSubscriptionDialog() + + showPricingTable() + + const { dialogComponentProps } = mockShowLayoutDialog.mock.calls[0][0] + expect(dialogComponentProps).toMatchObject({ + modal: false + }) + expectRekaPricingDialogProps(dialogComponentProps) + }) + it('keeps a non-legacy (credit-slider) team subscriber on the unified table', () => { mockShouldUseWorkspaceBilling.value = true mockIsInPersonalWorkspace.value = false diff --git a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts index 17f1fafc4a..afd941073b 100644 --- a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts +++ b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts @@ -80,19 +80,12 @@ export const useSubscriptionDialog = () => { trackModalOpened(options?.reason) - // Shared dialog shell styling for both variants. - const dialogComponentProps = { - style: 'width: min(1328px, 95vw); max-height: 958px;', - pt: { - root: { - class: 'rounded-2xl bg-transparent h-full' - }, - content: { - class: - '!p-0 rounded-2xl border border-border-default bg-secondary-background shadow-[0_25px_80px_rgba(5,6,12,0.45)] h-full' - } - } - } + const legacyPricingDialogProps = { + renderer: 'reka', + size: 'full', + contentClass: + 'sm:max-w-7xl max-h-[90vh] rounded-2xl border border-border-default bg-secondary-background shadow-[0_25px_80px_rgba(5,6,12,0.45)]' + } as const // Jun-5 model: a single unified pricing table (personal/team plan toggle on // one workspace) for workspaces on the consolidated billing flow. Replaces @@ -120,7 +113,10 @@ export const useSubscriptionDialog = () => { // The legacy table hosts a PrimeVue Popover teleported to body; Reka // modal mode traps focus and disables body pointer-events, making it // unclickable. The unified table has no such overlay. - dialogComponentProps: { ...dialogComponentProps, modal: false } + dialogComponentProps: { + ...legacyPricingDialogProps, + modal: false + } }) return } @@ -144,7 +140,7 @@ export const useSubscriptionDialog = () => { dialogComponentProps: { // Reka (the default renderer) sizes via size/contentClass; a PrimeVue // `style` width is ignored here and collapses the table to the default - // `md` frame. `w-fit` lets each step hug its content — the pricing + // `md` frame. `w-fit` lets each step hug its content -- the pricing // table fills its 1280px content while the compact confirm/success // steps shrink (the content root sets its own width per checkoutStep). renderer: 'reka', @@ -167,7 +163,7 @@ export const useSubscriptionDialog = () => { reason: options?.reason, onChooseTeam: () => startTeamWorkspaceUpgradeFlow() }, - dialogComponentProps + dialogComponentProps: legacyPricingDialogProps }) }