fix: prevent confirm dialog buttons from being unreachable on mobile with long text

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

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>

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

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>