From e160cb74d8c5f8d208eaada82336e21b47b63694 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Sun, 8 Feb 2026 13:42:11 -0800
Subject: [PATCH 1/7] fix: prevent confirm dialog buttons from being
 unreachable on mobile with long text

Amp-Thread-ID: https://ampcode.com/threads/T-019c3f33-f3ea-726c-9b87-a5e07a6bcc62
---
 src/components/dialog/confirm/ConfirmBody.vue |  2 +-
 .../dialog/confirm/ConfirmFooter.vue          |  2 +-
 .../content/ConfirmationDialogContent.test.ts | 48 +++++++++++++++++++
 .../content/ConfirmationDialogContent.vue     |  3 +-
 4 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 src/components/dialog/content/ConfirmationDialogContent.test.ts

diff --git a/src/components/dialog/confirm/ConfirmBody.vue b/src/components/dialog/confirm/ConfirmBody.vue
index 9a1cd5980d4..71fa4a993f2 100644
--- a/src/components/dialog/confirm/ConfirmBody.vue
+++ b/src/components/dialog/confirm/ConfirmBody.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col px-4 py-2 text-sm text-muted-foreground border-t border-border-default"
+    class="flex flex-col break-words px-4 py-2 text-sm text-muted-foreground border-t border-border-default"
   >
     <p v-if="promptTextReal">
       {{ promptTextReal }}
diff --git a/src/components/dialog/confirm/ConfirmFooter.vue b/src/components/dialog/confirm/ConfirmFooter.vue
index 9cdd6e37b8c..175dc919ed2 100644
--- a/src/components/dialog/confirm/ConfirmFooter.vue
+++ b/src/components/dialog/confirm/ConfirmFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="w-full flex gap-2 justify-end px-2 pb-2">
+  <section class="w-full flex flex-wrap gap-2 justify-end px-2 pb-2">
     <Button :disabled variant="textonly" autofocus @click="$emit('cancel')">
       {{ cancelTextX }}
     </Button>
diff --git a/src/components/dialog/content/ConfirmationDialogContent.test.ts b/src/components/dialog/content/ConfirmationDialogContent.test.ts
new file mode 100644
index 00000000000..c9c62b0fd4b
--- /dev/null
+++ b/src/components/dialog/content/ConfirmationDialogContent.test.ts
@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import ConfirmationDialogContent from './ConfirmationDialogContent.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} },
+  missingWarn: false,
+  fallbackWarn: false
+})
+
+describe('ConfirmationDialogContent', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  function mountComponent(props = {}) {
+    return mount(ConfirmationDialogContent, {
+      global: {
+        plugins: [PrimeVue, i18n]
+      },
+      props: {
+        message: 'Test message',
+        type: 'default' as const,
+        onConfirm: vi.fn(),
+        ...props
+      }
+    })
+  }
+
+  it('renders long messages without breaking layout', () => {
+    const longFilename =
+      'workflow_checkpoint_' + 'a'.repeat(200) + '.safetensors'
+    const wrapper = mountComponent({ message: longFilename })
+    expect(wrapper.text()).toContain(longFilename)
+  })
+
+  it('uses flex-wrap on button container for narrow viewports', () => {
+    const wrapper = mountComponent()
+    const buttonRow = wrapper.find('.flex.flex-wrap.justify-end.gap-4')
+    expect(buttonRow.exists()).toBe(true)
+  })
+})
diff --git a/src/components/dialog/content/ConfirmationDialogContent.vue b/src/components/dialog/content/ConfirmationDialogContent.vue
index 556379b3fba..c1cefa750e3 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -15,7 +15,7 @@
     >
       {{ hint }}
     </Message>
-    <div class="flex justify-end gap-4">
+    <div class="flex flex-wrap justify-end gap-4">
       <div
         v-if="type === 'overwriteBlueprint'"
         class="flex justify-start gap-4"
@@ -132,5 +132,6 @@ const onConfirm = () => {
 <style lang="css" scoped>
 .prompt-dialog-content {
   white-space: pre-wrap;
+  overflow-wrap: break-word;
 }
 </style>

From 6dfffa3d3d0f23c496c2cb7105bcaae0121c1cd2 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Sun, 8 Feb 2026 13:57:20 -0800
Subject: [PATCH 2/7] fix: address review - replace style block with Tailwind,
 type test props, add Playwright test

Amp-Thread-ID: https://ampcode.com/threads/T-019c3f33-f3ea-726c-9b87-a5e07a6bcc62
---
 .../tests/confirmDialogTextWrap.spec.ts       | 36 +++++++++++++++++++
 .../content/ConfirmationDialogContent.test.ts | 15 ++++----
 .../content/ConfirmationDialogContent.vue     |  8 +----
 3 files changed, 43 insertions(+), 16 deletions(-)
 create mode 100644 browser_tests/tests/confirmDialogTextWrap.spec.ts

diff --git a/browser_tests/tests/confirmDialogTextWrap.spec.ts b/browser_tests/tests/confirmDialogTextWrap.spec.ts
new file mode 100644
index 00000000000..b18a9fe8b68
--- /dev/null
+++ b/browser_tests/tests/confirmDialogTextWrap.spec.ts
@@ -0,0 +1,36 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe(
+  'Confirm dialog text wrapping',
+  { tag: ['@mobile'] },
+  () => {
+    test('@mobile confirm dialog buttons are visible with long unbreakable text', async ({
+      comfyPage
+    }) => {
+      const longFilename = 'workflow_checkpoint_' + 'a'.repeat(200) + '.json'
+
+      await comfyPage.page.evaluate((msg) => {
+        window
+          .app!.extensionManager.dialog.confirm({
+            title: 'Confirm',
+            type: 'default',
+            message: msg
+          })
+          .catch(() => {})
+      }, longFilename)
+
+      const dialog = comfyPage.page.getByRole('dialog')
+      await expect(dialog).toBeVisible()
+
+      const confirmButton = dialog.getByRole('button', { name: 'Confirm' })
+      await expect(confirmButton).toBeVisible()
+      await expect(confirmButton).toBeInViewport()
+
+      const cancelButton = dialog.getByRole('button', { name: 'Cancel' })
+      await expect(cancelButton).toBeVisible()
+      await expect(cancelButton).toBeInViewport()
+    })
+  }
+)
diff --git a/src/components/dialog/content/ConfirmationDialogContent.test.ts b/src/components/dialog/content/ConfirmationDialogContent.test.ts
index c9c62b0fd4b..51d8faf7fdb 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.test.ts
+++ b/src/components/dialog/content/ConfirmationDialogContent.test.ts
@@ -2,10 +2,13 @@ import { mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { ComponentProps } from 'vue-component-type-helpers'
 import { createI18n } from 'vue-i18n'
 
 import ConfirmationDialogContent from './ConfirmationDialogContent.vue'
 
+type Props = ComponentProps<typeof ConfirmationDialogContent>
+
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -19,17 +22,17 @@ describe('ConfirmationDialogContent', () => {
     setActivePinia(createPinia())
   })
 
-  function mountComponent(props = {}) {
+  function mountComponent(props: Partial<Props> = {}) {
     return mount(ConfirmationDialogContent, {
       global: {
         plugins: [PrimeVue, i18n]
       },
       props: {
         message: 'Test message',
-        type: 'default' as const,
+        type: 'default',
         onConfirm: vi.fn(),
         ...props
-      }
+      } as Props
     })
   }
 
@@ -39,10 +42,4 @@ describe('ConfirmationDialogContent', () => {
     const wrapper = mountComponent({ message: longFilename })
     expect(wrapper.text()).toContain(longFilename)
   })
-
-  it('uses flex-wrap on button container for narrow viewports', () => {
-    const wrapper = mountComponent()
-    const buttonRow = wrapper.find('.flex.flex-wrap.justify-end.gap-4')
-    expect(buttonRow.exists()).toBe(true)
-  })
 })
diff --git a/src/components/dialog/content/ConfirmationDialogContent.vue b/src/components/dialog/content/ConfirmationDialogContent.vue
index c1cefa750e3..9354249148f 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="prompt-dialog-content m-2 mt-4 flex flex-col gap-6">
+  <section class="m-2 mt-4 flex flex-col gap-6 whitespace-pre-wrap break-words">
     <span>{{ message }}</span>
     <ul v-if="itemList?.length" class="m-0 flex flex-col gap-2 pl-4">
       <li v-for="item of itemList" :key="item">
@@ -129,9 +129,3 @@ const onConfirm = () => {
 }
 </script>
 
-<style lang="css" scoped>
-.prompt-dialog-content {
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-}
-</style>

From 22ab139e39c471fbbb24fa47f7ba5573b98e81f9 Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Sun, 8 Feb 2026 21:59:37 +0000
Subject: [PATCH 3/7] [automated] Apply ESLint and Oxfmt fixes

---
 .../tests/confirmDialogTextWrap.spec.ts       | 52 +++++++++----------
 .../content/ConfirmationDialogContent.vue     |  1 -
 2 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/browser_tests/tests/confirmDialogTextWrap.spec.ts b/browser_tests/tests/confirmDialogTextWrap.spec.ts
index b18a9fe8b68..6a12ccd1b66 100644
--- a/browser_tests/tests/confirmDialogTextWrap.spec.ts
+++ b/browser_tests/tests/confirmDialogTextWrap.spec.ts
@@ -2,35 +2,31 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
-test.describe(
-  'Confirm dialog text wrapping',
-  { tag: ['@mobile'] },
-  () => {
-    test('@mobile confirm dialog buttons are visible with long unbreakable text', async ({
-      comfyPage
-    }) => {
-      const longFilename = 'workflow_checkpoint_' + 'a'.repeat(200) + '.json'
+test.describe('Confirm dialog text wrapping', { tag: ['@mobile'] }, () => {
+  test('@mobile confirm dialog buttons are visible with long unbreakable text', async ({
+    comfyPage
+  }) => {
+    const longFilename = 'workflow_checkpoint_' + 'a'.repeat(200) + '.json'
 
-      await comfyPage.page.evaluate((msg) => {
-        window
-          .app!.extensionManager.dialog.confirm({
-            title: 'Confirm',
-            type: 'default',
-            message: msg
-          })
-          .catch(() => {})
-      }, longFilename)
+    await comfyPage.page.evaluate((msg) => {
+      window
+        .app!.extensionManager.dialog.confirm({
+          title: 'Confirm',
+          type: 'default',
+          message: msg
+        })
+        .catch(() => {})
+    }, longFilename)
 
-      const dialog = comfyPage.page.getByRole('dialog')
-      await expect(dialog).toBeVisible()
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
 
-      const confirmButton = dialog.getByRole('button', { name: 'Confirm' })
-      await expect(confirmButton).toBeVisible()
-      await expect(confirmButton).toBeInViewport()
+    const confirmButton = dialog.getByRole('button', { name: 'Confirm' })
+    await expect(confirmButton).toBeVisible()
+    await expect(confirmButton).toBeInViewport()
 
-      const cancelButton = dialog.getByRole('button', { name: 'Cancel' })
-      await expect(cancelButton).toBeVisible()
-      await expect(cancelButton).toBeInViewport()
-    })
-  }
-)
+    const cancelButton = dialog.getByRole('button', { name: 'Cancel' })
+    await expect(cancelButton).toBeVisible()
+    await expect(cancelButton).toBeInViewport()
+  })
+})
diff --git a/src/components/dialog/content/ConfirmationDialogContent.vue b/src/components/dialog/content/ConfirmationDialogContent.vue
index 9354249148f..e1927739046 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -128,4 +128,3 @@ const onConfirm = () => {
   useDialogStore().closeDialog()
 }
 </script>
-

From 638063bdc514f54bf500a8d9b38ca9de86cac84d Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Sun, 8 Feb 2026 14:48:56 -0800
Subject: [PATCH 4/7] fix: constrain confirm dialog height to keep buttons in
 viewport on mobile

Add max-h-[70vh] to the dialog section and wrap message content in a
scrollable container with overflow-y-auto, keeping the button row
pinned with shrink-0. This ensures buttons remain in viewport even
when long unbreakable text fills the dialog on small screens.

Also applies formatter to the Playwright test file.

Amp-Thread-ID: https://ampcode.com/threads/T-019c3f6e-3eb3-725c-bf54-0183361abe1d
---
 .../content/ConfirmationDialogContent.vue     | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/dialog/content/ConfirmationDialogContent.vue b/src/components/dialog/content/ConfirmationDialogContent.vue
index e1927739046..d59123800e0 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -1,21 +1,26 @@
 <template>
-  <section class="m-2 mt-4 flex flex-col gap-6 whitespace-pre-wrap break-words">
-    <span>{{ message }}</span>
-    <ul v-if="itemList?.length" class="m-0 flex flex-col gap-2 pl-4">
-      <li v-for="item of itemList" :key="item">
-        {{ item }}
-      </li>
-    </ul>
-    <Message
-      v-if="hint"
-      icon="pi pi-info-circle"
-      severity="secondary"
-      size="small"
-      variant="simple"
-    >
-      {{ hint }}
-    </Message>
-    <div class="flex flex-wrap justify-end gap-4">
+  <section
+    class="m-2 mt-4 flex max-h-[70vh] flex-col gap-6 whitespace-pre-wrap break-words"
+  >
+    <div class="flex-1 overflow-y-auto">
+      <span>{{ message }}</span>
+      <ul v-if="itemList?.length" class="m-0 mt-2 flex flex-col gap-2 pl-4">
+        <li v-for="item of itemList" :key="item">
+          {{ item }}
+        </li>
+      </ul>
+      <Message
+        v-if="hint"
+        class="mt-2"
+        icon="pi pi-info-circle"
+        severity="secondary"
+        size="small"
+        variant="simple"
+      >
+        {{ hint }}
+      </Message>
+    </div>
+    <div class="flex shrink-0 flex-wrap justify-end gap-4">
       <div
         v-if="type === 'overwriteBlueprint'"
         class="flex justify-start gap-4"

From 9b89c9cf72dc6cea76bf7a652f85ac010e1827ec Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Fri, 13 Feb 2026 18:29:53 -0800
Subject: [PATCH 5/7] fix: constrain global dialog max-height to viewport for
 mobile overflow

Amp-Thread-ID: https://ampcode.com/threads/T-019c3fcd-bcf6-733b-a36e-ac87d5cb60fd
---
 src/components/dialog/GlobalDialog.vue                      | 4 ++++
 src/components/dialog/content/ConfirmationDialogContent.vue | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index aede769071d..5ea668d89e9 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -78,6 +78,10 @@ function getDialogPt(item: {
 <style>
 @reference '../../assets/css/style.css';
 
+.global-dialog .p-dialog {
+  max-width: calc(100vw - 1rem);
+}
+
 .global-dialog .p-dialog-header {
   @apply p-2 2xl:p-[var(--p-dialog-header-padding)];
   @apply pb-0;
diff --git a/src/components/dialog/content/ConfirmationDialogContent.vue b/src/components/dialog/content/ConfirmationDialogContent.vue
index d59123800e0..85af778d3f8 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -1,8 +1,8 @@
 <template>
   <section
-    class="m-2 mt-4 flex max-h-[70vh] flex-col gap-6 whitespace-pre-wrap break-words"
+    class="m-2 mt-4 flex flex-col gap-6 whitespace-pre-wrap break-words"
   >
-    <div class="flex-1 overflow-y-auto">
+    <div>
       <span>{{ message }}</span>
       <ul v-if="itemList?.length" class="m-0 mt-2 flex flex-col gap-2 pl-4">
         <li v-for="item of itemList" :key="item">

From 6d3666c38df4e074b6113ce7caeac66d8e016549 Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Sat, 14 Feb 2026 03:21:48 +0000
Subject: [PATCH 6/7] [automated] Apply ESLint and Oxfmt fixes

---
 src/components/dialog/content/ConfirmationDialogContent.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/dialog/content/ConfirmationDialogContent.vue b/src/components/dialog/content/ConfirmationDialogContent.vue
index 85af778d3f8..89a247baa87 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -1,7 +1,5 @@
 <template>
-  <section
-    class="m-2 mt-4 flex flex-col gap-6 whitespace-pre-wrap break-words"
-  >
+  <section class="m-2 mt-4 flex flex-col gap-6 whitespace-pre-wrap break-words">
     <div>
       <span>{{ message }}</span>
       <ul v-if="itemList?.length" class="m-0 mt-2 flex flex-col gap-2 pl-4">

From 7e4d35b2153f6179a7fe8ee18f70742ba79f493e Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Fri, 13 Feb 2026 19:29:54 -0800
Subject: [PATCH 7/7] fix: apply max-width directly to global-dialog root
 element

Amp-Thread-ID: https://ampcode.com/threads/T-019c3fcd-bcf6-733b-a36e-ac87d5cb60fd
---
 src/components/dialog/GlobalDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index 5ea668d89e9..9f2c4e41e08 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -78,7 +78,7 @@ function getDialogPt(item: {
 <style>
 @reference '../../assets/css/style.css';
 
-.global-dialog .p-dialog {
+.global-dialog {
   max-width: calc(100vw - 1rem);
 }