diff --git a/resources/js/copy-button.js b/resources/js/copy-button.js
index 0ce8d5d67d..b62eaa120e 100644
--- a/resources/js/copy-button.js
+++ b/resources/js/copy-button.js
@@ -12,15 +12,22 @@ export function initializeCopyButtonComponent() {
                     await navigator.clipboard.writeText(value);
                 } else {
                     // Deprecated, but the only copy path on plain http (non-secure contexts).
+                    // The textarea goes next to the button, not into <body>: a modal's x-trap
+                    // pulls focus back from nodes outside it, which clears the selection.
+                    const previousFocus = document.activeElement;
                     const textarea = document.createElement('textarea');
                     textarea.value = value;
                     textarea.setAttribute('readonly', '');
+                    textarea.setAttribute('tabindex', '-1');
                     textarea.style.position = 'fixed';
                     textarea.style.left = '-9999px';
-                    document.body.appendChild(textarea);
+                    this.$el.after(textarea);
+                    textarea.focus({ preventScroll: true });
                     textarea.select();
+                    textarea.setSelectionRange(0, textarea.value.length);
                     const ok = document.execCommand('copy');
-                    document.body.removeChild(textarea);
+                    textarea.remove();
+                    previousFocus?.focus?.({ preventScroll: true });
                     if (!ok) {
                         throw new Error('Copy command was rejected.');
                     }
diff --git a/resources/views/livewire/project/shared/cloudflare-autoconfigure.blade.php b/resources/views/livewire/project/shared/cloudflare-autoconfigure.blade.php
index 8d102ff47f..9b565c4e98 100644
--- a/resources/views/livewire/project/shared/cloudflare-autoconfigure.blade.php
+++ b/resources/views/livewire/project/shared/cloudflare-autoconfigure.blade.php
@@ -223,39 +223,15 @@
                             </div>
 
                             @if (filled($dnsCopyText))
-                                <div class="flex flex-wrap items-center justify-between gap-2"
-                                    x-data="{
-                                        copied: false,
-                                        async copyAll(text) {
-                                            try {
-                                                if (navigator.clipboard?.writeText) {
-                                                    await navigator.clipboard.writeText(text);
-                                                } else {
-                                                    const el = document.createElement('textarea');
-                                                    el.value = text;
-                                                    el.setAttribute('readonly', '');
-                                                    el.style.position = 'fixed';
-                                                    el.style.left = '-9999px';
-                                                    document.body.appendChild(el);
-                                                    el.select();
-                                                    document.execCommand('copy');
-                                                    document.body.removeChild(el);
-                                                }
-                                                this.copied = true;
-                                                setTimeout(() => this.copied = false, 1000);
-                                            } catch (e) {
-                                                console.error('Copy failed', e);
-                                            }
-                                        }
-                                    }">
+                                <div class="flex flex-wrap items-center justify-between gap-2">
                                     <p class="text-[12px] text-neutral-500 dark:text-fg-dim">
                                         {{ count($dnsHints) }}
                                         {{ count($dnsHints) === 1 ? 'entry' : 'entries' }}
                                         · BIND zone format
                                     </p>
                                     <button type="button" class="button shrink-0"
-                                        title="Copy as BIND-compatible zone file"
-                                        @click.prevent="copyAll(@js($dnsCopyText))">
+                                        title="Copy as BIND-compatible zone file" x-data="copyButton"
+                                        @click.prevent="copy(@js($dnsCopyText))">
                                         <span x-text="copied ? 'Copied' : 'Copy all'"></span>
                                     </button>
                                 </div>