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)

src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts

@@ -79,6 +79,17 @@ vi.mock('@/platform/workspace/composables/useWorkspaceUI', () => ({
   })
 }))
 
+function expectRekaPricingDialogProps(
+  dialogComponentProps: Record<string, unknown>
+) {
+  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

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