From 9a50f0802196430ce93e1876f6d28ffd3abe68d7 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 12:17:17 -0500
Subject: [PATCH] feat: improve Proxmox modal handling by consolidating
 backdrop and transition effects across boot order and cloud-init views for a
 more cohesive user experience

---
 .../Proxmox/views/boot-order.blade.php        | 177 ++++----
 .../Proxmox/views/cloud-init.blade.php        | 388 +++---------------
 2 files changed, 140 insertions(+), 425 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/boot-order.blade.php b/extensions/Servers/Proxmox/views/boot-order.blade.php
index c4da32bf6..a1c91a45a 100644
--- a/extensions/Servers/Proxmox/views/boot-order.blade.php
+++ b/extensions/Servers/Proxmox/views/boot-order.blade.php
@@ -728,50 +728,51 @@
                     <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors" :disabled="!$this->hasChanges">
                         <x-ri-question-line class="size-4" />
                     </button>
-                <!-- Modal Backdrop -->
-                <div x-show="open" 
-                     x-transition:enter="transition ease-out duration-300"
-                     x-transition:enter-start="opacity-0"
-                     x-transition:enter-end="opacity-100"
-                     x-transition:leave="transition ease-in duration-200"
-                     x-transition:leave-start="opacity-100"
-                     x-transition:leave-end="opacity-0"
-                     @click="open = false"
-                     @keydown.escape.window="open = false"
-                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                     style="display: none;">
-                </div>
-                <!-- Modal -->
-                <div x-show="open"
-                     x-transition:enter="transition ease-out duration-300"
-                     x-transition:enter-start="opacity-0 scale-95"
-                     x-transition:enter-end="opacity-100 scale-100"
-                     x-transition:leave="transition ease-in duration-200"
-                     x-transition:leave-start="opacity-100 scale-100"
-                     x-transition:leave-end="opacity-0 scale-95"
-                     @click.away="open = false"
-                     @keydown.escape.window="open = false"
-                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                     style="display: none;">
-                    <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
-                        <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                            <x-ri-close-line class="size-5" />
-                        </button>
-                        <div class="flex items-center gap-3 mb-4 pr-8">
-                            <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                <x-ri-restart-line class="size-5 text-primary" />
+                    <!-- Modal Backdrop -->
+                    <div x-show="open" 
+                         x-transition:enter="transition ease-out duration-300"
+                         x-transition:enter-start="opacity-0"
+                         x-transition:enter-end="opacity-100"
+                         x-transition:leave="transition ease-in duration-200"
+                         x-transition:leave-start="opacity-100"
+                         x-transition:leave-end="opacity-0"
+                         @click="open = false"
+                         @keydown.escape.window="open = false"
+                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                         style="display: none;">
+                    </div>
+                    <!-- Modal -->
+                    <div x-show="open"
+                         x-transition:enter="transition ease-out duration-300"
+                         x-transition:enter-start="opacity-0 scale-95"
+                         x-transition:enter-end="opacity-100 scale-100"
+                         x-transition:leave="transition ease-in duration-200"
+                         x-transition:leave-start="opacity-100 scale-100"
+                         x-transition:leave-end="opacity-0 scale-95"
+                         @click.away="open = false"
+                         @keydown.escape.window="open = false"
+                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                         style="display: none;">
+                        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
+                            <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
+                                <x-ri-close-line class="size-5" />
+                            </button>
+                            <div class="flex items-center gap-3 mb-4 pr-8">
+                                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+                                    <x-ri-restart-line class="size-5 text-primary" />
+                                </div>
+                                <h6 class="font-sans text-lg font-semibold leading-tight text-base">
+                                    Reset to Current
+                                </h6>
                             </div>
-                            <h6 class="font-sans text-lg font-semibold leading-tight text-base">
-                                Reset to Current
-                            </h6>
-                        </div>
-                        <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                            Discards any unsaved changes to the boot order and restores it to match the last saved configuration.
-                        </p>
-                        <div class="pt-4 mt-4 border-t border-neutral/30">
-                            <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                This button is only enabled when there are unsaved changes. Use this if you want to undo modifications without refreshing the entire configuration from the server.
+                            <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
+                                Discards any unsaved changes to the boot order and restores it to match the last saved configuration.
                             </p>
+                            <div class="pt-4 mt-4 border-t border-neutral/30">
+                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                                    This button is only enabled when there are unsaved changes. Use this if you want to undo modifications without refreshing the entire configuration from the server.
+                                </p>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -786,57 +787,57 @@
                     <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors" :disabled="!$this->hasChanges">
                         <x-ri-question-line class="size-4" />
                     </button>
-                <!-- Modal Backdrop -->
-                <div x-show="open" 
-                     x-transition:enter="transition ease-out duration-300"
-                     x-transition:enter-start="opacity-0"
-                     x-transition:enter-end="opacity-100"
-                     x-transition:leave="transition ease-in duration-200"
-                     x-transition:leave-start="opacity-100"
-                     x-transition:leave-end="opacity-0"
-                     @click="open = false"
-                     @keydown.escape.window="open = false"
-                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                     style="display: none;">
-                </div>
-                <!-- Modal -->
-                <div x-show="open"
-                     x-transition:enter="transition ease-out duration-300"
-                     x-transition:enter-start="opacity-0 scale-95"
-                     x-transition:enter-end="opacity-100 scale-100"
-                     x-transition:leave="transition ease-in duration-200"
-                     x-transition:leave-start="opacity-100 scale-100"
-                     x-transition:leave-end="opacity-0 scale-95"
-                     @click.away="open = false"
-                     @keydown.escape.window="open = false"
-                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                     style="display: none;">
-                    <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
-                        <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                            <x-ri-close-line class="size-5" />
-                        </button>
-                        <div class="flex items-center gap-3 mb-4 pr-8">
-                            <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                <x-ri-save-line class="size-5 text-primary" />
+                    <!-- Modal Backdrop -->
+                    <div x-show="open" 
+                         x-transition:enter="transition ease-out duration-300"
+                         x-transition:enter-start="opacity-0"
+                         x-transition:enter-end="opacity-100"
+                         x-transition:leave="transition ease-in duration-200"
+                         x-transition:leave-start="opacity-100"
+                         x-transition:leave-end="opacity-0"
+                         @click="open = false"
+                         @keydown.escape.window="open = false"
+                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                         style="display: none;">
+                    </div>
+                    <!-- Modal -->
+                    <div x-show="open"
+                         x-transition:enter="transition ease-out duration-300"
+                         x-transition:enter-start="opacity-0 scale-95"
+                         x-transition:enter-end="opacity-100 scale-100"
+                         x-transition:leave="transition ease-in duration-200"
+                         x-transition:leave-start="opacity-100 scale-100"
+                         x-transition:leave-end="opacity-0 scale-95"
+                         @click.away="open = false"
+                         @keydown.escape.window="open = false"
+                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                         style="display: none;">
+                        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
+                            <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
+                                <x-ri-close-line class="size-5" />
+                            </button>
+                            <div class="flex items-center gap-3 mb-4 pr-8">
+                                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+                                    <x-ri-save-line class="size-5 text-primary" />
+                                </div>
+                                <h6 class="font-sans text-lg font-semibold leading-tight text-base">
+                                    Save Boot Order
+                                </h6>
                             </div>
-                            <h6 class="font-sans text-lg font-semibold leading-tight text-base">
-                                Save Boot Order
-                            </h6>
-                        </div>
-                        <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                            Commits your boot order changes to the QEMU server configuration. The new boot sequence will be applied to the virtual machine and will take effect on the next power event (start, reboot, or reset).
-                        </p>
-                        <div class="pt-4 mt-4 border-t border-neutral/30">
-                            <p class="block font-sans text-xs font-normal leading-relaxed text-base/75 mb-2">
-                                If the boot order is empty, the system will reset to the default platform boot sequence.
-                            </p>
-                            <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                This button is only enabled when there are unsaved changes.
+                            <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
+                                Commits your boot order changes to the QEMU server configuration. The new boot sequence will be applied to the virtual machine and will take effect on the next power event (start, reboot, or reset).
                             </p>
+                            <div class="pt-4 mt-4 border-t border-neutral/30">
+                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75 mb-2">
+                                    If the boot order is empty, the system will reset to the default platform boot sequence.
+                                </p>
+                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                                    This button is only enabled when there are unsaved changes.
+                                </p>
+                            </div>
                         </div>
                     </div>
                 </div>
-                </div>
             </div>
         </div>
 
diff --git a/extensions/Servers/Proxmox/views/cloud-init.blade.php b/extensions/Servers/Proxmox/views/cloud-init.blade.php
index ad4ca1593..cf8d7750e 100644
--- a/extensions/Servers/Proxmox/views/cloud-init.blade.php
+++ b/extensions/Servers/Proxmox/views/cloud-init.blade.php
@@ -53,32 +53,10 @@
                     <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
                         <x-ri-question-line class="size-4" />
                     </button>
-                    <!-- Modal Backdrop -->
-                    <div x-show="open" 
-                         x-transition:enter="transition ease-out duration-300"
-                         x-transition:enter-start="opacity-0"
-                         x-transition:enter-end="opacity-100"
-                         x-transition:leave="transition ease-in duration-200"
-                         x-transition:leave-start="opacity-100"
-                         x-transition:leave-end="opacity-0"
-                         @click="open = false"
-                         @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                         style="display: none;">
-                    </div>
-                    <!-- Modal -->
-                    <div x-show="open"
-                         x-transition:enter="transition ease-out duration-300"
-                         x-transition:enter-start="opacity-0 scale-95"
-                         x-transition:enter-end="opacity-100 scale-100"
-                         x-transition:leave="transition ease-in duration-200"
-                         x-transition:leave-start="opacity-100 scale-100"
-                         x-transition:leave-end="opacity-0 scale-95"
-                         @click.away="open = false"
-                         @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                         style="display: none;">
-                        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
+                    <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
+                        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6"
+                             x-on:keydown.escape.window="open = false">
                             <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                                 <x-ri-close-line class="size-5" />
                             </button>
@@ -124,32 +102,10 @@
                                 <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
                                     <x-ri-question-line class="size-4" />
                                 </button>
-                                <!-- Modal Backdrop -->
-                                <div x-show="open" 
-                                     x-transition:enter="transition ease-out duration-300"
-                                     x-transition:enter-start="opacity-0"
-                                     x-transition:enter-end="opacity-100"
-                                     x-transition:leave="transition ease-in duration-200"
-                                     x-transition:leave-start="opacity-100"
-                                     x-transition:leave-end="opacity-0"
-                                     @click="open = false"
-                                     @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                                     style="display: none;">
-                                </div>
-                                <!-- Modal -->
-                                <div x-show="open"
-                                     x-transition:enter="transition ease-out duration-300"
-                                     x-transition:enter-start="opacity-0 scale-95"
-                                     x-transition:enter-end="opacity-100 scale-100"
-                                     x-transition:leave="transition ease-in duration-200"
-                                     x-transition:leave-start="opacity-100 scale-100"
-                                     x-transition:leave-end="opacity-0 scale-95"
-                                     @click.away="open = false"
-                                     @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                                     style="display: none;">
-                                    <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
+                                <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                                    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
+                                    <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6"
+                                         x-on:keydown.escape.window="open = false">
                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                                             <x-ri-close-line class="size-5" />
                                         </button>
@@ -206,32 +162,10 @@
                         </div>
                         <p class="text-xs text-base/60">Use distro-friendly names. Leave blank to keep the template default.</p>
 
-                        <!-- Modal Backdrop -->
-                        <div x-cloak x-show="showCiUserModal" 
-                             x-transition:enter="transition ease-out duration-300"
-                             x-transition:enter-start="opacity-0"
-                             x-transition:enter-end="opacity-100"
-                             x-transition:leave="transition ease-in duration-200"
-                             x-transition:leave-start="opacity-100"
-                             x-transition:leave-end="opacity-0"
-                             @click="showCiUserModal = false"
-                             @keydown.escape.window="showCiUserModal = false"
-                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                             style="display: none;">
-                        </div>
-                        <!-- Modal -->
-                        <div x-cloak x-show="showCiUserModal" 
-                             x-transition:enter="transition ease-out duration-300"
-                             x-transition:enter-start="opacity-0 scale-95"
-                             x-transition:enter-end="opacity-100 scale-100"
-                             x-transition:leave="transition ease-in duration-200"
-                             x-transition:leave-start="opacity-100 scale-100"
-                             x-transition:leave-end="opacity-0 scale-95"
-                             @click.away="showCiUserModal = false"
-                             @keydown.escape.window="showCiUserModal = false"
-                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                             style="display: none;">
-                            <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
+                        <div x-cloak x-show="showCiUserModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                            <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showCiUserModal = false"></div>
+                            <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
+                                 x-on:keydown.escape.window="showCiUserModal = false">
                                 <div class="flex items-center justify-between">
                                     <h4 class="text-base font-semibold text-base/90">Edit Cloud-init User</h4>
                                     <button type="button"
@@ -291,32 +225,10 @@
                         <p class="text-xs text-base/60">Matches the Overview tab control. Use Save for database only, Save &amp; Apply to push via cloud-init.</p>
 
                         @if(isset($server->password) && $server->password)
-                            <!-- Modal Backdrop -->
-                            <div x-cloak x-show="showPasswordViewModal" 
-                                 x-transition:enter="transition ease-out duration-300"
-                                 x-transition:enter-start="opacity-0"
-                                 x-transition:enter-end="opacity-100"
-                                 x-transition:leave="transition ease-in duration-200"
-                                 x-transition:leave-start="opacity-100"
-                                 x-transition:leave-end="opacity-0"
-                                 @click="showPasswordViewModal = false"
-                                 @keydown.escape.window="showPasswordViewModal = false"
-                                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                                 style="display: none;">
-                            </div>
-                            <!-- Modal -->
-                            <div x-cloak x-show="showPasswordViewModal" 
-                                 x-transition:enter="transition ease-out duration-300"
-                                 x-transition:enter-start="opacity-0 scale-95"
-                                 x-transition:enter-end="opacity-100 scale-100"
-                                 x-transition:leave="transition ease-in duration-200"
-                                 x-transition:leave-start="opacity-100 scale-100"
-                                 x-transition:leave-end="opacity-0 scale-95"
-                                 @click.away="showPasswordViewModal = false"
-                                 @keydown.escape.window="showPasswordViewModal = false"
-                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                                 style="display: none;">
+                            <div x-cloak x-show="showPasswordViewModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                                <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showPasswordViewModal = false"></div>
                                 <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
+                                     x-on:keydown.escape.window="showPasswordViewModal = false"
                                      x-data="{
                                          copied: false,
                                          copyText: {{ json_encode($server->password) }},
@@ -350,32 +262,10 @@
                             </div>
                         @endif
 
-                        <!-- Modal Backdrop -->
-                        <div x-cloak x-show="showPasswordEditModal" 
-                             x-transition:enter="transition ease-out duration-300"
-                             x-transition:enter-start="opacity-0"
-                             x-transition:enter-end="opacity-100"
-                             x-transition:leave="transition ease-in duration-200"
-                             x-transition:leave-start="opacity-100"
-                             x-transition:leave-end="opacity-0"
-                             @click="showPasswordEditModal = false; $wire.cancelEditingPassword()"
-                             @keydown.escape.window="showPasswordEditModal = false; $wire.cancelEditingPassword()"
-                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                             style="display: none;">
-                        </div>
-                        <!-- Modal -->
-                        <div x-cloak x-show="showPasswordEditModal" 
-                             x-transition:enter="transition ease-out duration-300"
-                             x-transition:enter-start="opacity-0 scale-95"
-                             x-transition:enter-end="opacity-100 scale-100"
-                             x-transition:leave="transition ease-in duration-200"
-                             x-transition:leave-start="opacity-100 scale-100"
-                             x-transition:leave-end="opacity-0 scale-95"
-                             @click.away="showPasswordEditModal = false; $wire.cancelEditingPassword()"
-                             @keydown.escape.window="showPasswordEditModal = false; $wire.cancelEditingPassword()"
-                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                             style="display: none;">
-                            <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
+                        <div x-cloak x-show="showPasswordEditModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                            <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showPasswordEditModal = false; $wire.cancelEditingPassword()"></div>
+                            <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
+                                 x-on:keydown.escape.window="showPasswordEditModal = false; $wire.cancelEditingPassword()">
                                 <div class="flex items-center justify-between">
                                     <h4 class="text-base font-semibold text-base/90">Edit Root Password</h4>
                                     <button type="button"
@@ -450,32 +340,10 @@
                                         <x-ri-close-line class="inline size-4" />
                                     </button>
 
-                                    <!-- Modal Backdrop -->
-                                    <div x-cloak x-show="showKeyModal" 
-                                         x-transition:enter="transition ease-out duration-300"
-                                         x-transition:enter-start="opacity-0"
-                                         x-transition:enter-end="opacity-100"
-                                         x-transition:leave="transition ease-in duration-200"
-                                         x-transition:leave-start="opacity-100"
-                                         x-transition:leave-end="opacity-0"
-                                         @click="showKeyModal = false"
-                                         @keydown.escape.window="showKeyModal = false"
-                                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                                         style="display: none;">
-                                    </div>
-                                    <!-- Modal -->
-                                    <div x-cloak x-show="showKeyModal" 
-                                         x-transition:enter="transition ease-out duration-300"
-                                         x-transition:enter-start="opacity-0 scale-95"
-                                         x-transition:enter-end="opacity-100 scale-100"
-                                         x-transition:leave="transition ease-in duration-200"
-                                         x-transition:leave-start="opacity-100 scale-100"
-                                         x-transition:leave-end="opacity-0 scale-95"
-                                         @click.away="showKeyModal = false"
-                                         @keydown.escape.window="showKeyModal = false"
-                                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                                         style="display: none;">
-                                        <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
+                                    <div x-cloak x-show="showKeyModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                                        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showKeyModal = false"></div>
+                                        <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
+                                             x-on:keydown.escape.window="showKeyModal = false">
                                             <div class="flex items-center justify-between">
                                                 <h4 class="text-base font-semibold text-base/90">SSH Public Key</h4>
                                                 <button type="button"
@@ -510,32 +378,10 @@
                         </div>
                         <p class="text-xs text-base/60">Add as many keys as needed. The platform management key is always kept but never shown.</p>
 
-                        <!-- Modal Backdrop -->
-                        <div x-cloak x-show="showAddKeyModal" 
-                             x-transition:enter="transition ease-out duration-300"
-                             x-transition:enter-start="opacity-0"
-                             x-transition:enter-end="opacity-100"
-                             x-transition:leave="transition ease-in duration-200"
-                             x-transition:leave-start="opacity-100"
-                             x-transition:leave-end="opacity-0"
-                             @click="showAddKeyModal = false"
-                             @keydown.escape.window="showAddKeyModal = false"
-                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                             style="display: none;">
-                        </div>
-                        <!-- Modal -->
-                        <div x-cloak x-show="showAddKeyModal" 
-                             x-transition:enter="transition ease-out duration-300"
-                             x-transition:enter-start="opacity-0 scale-95"
-                             x-transition:enter-end="opacity-100 scale-100"
-                             x-transition:leave="transition ease-in duration-200"
-                             x-transition:leave-start="opacity-100 scale-100"
-                             x-transition:leave-end="opacity-0 scale-95"
-                             @click.away="showAddKeyModal = false"
-                             @keydown.escape.window="showAddKeyModal = false"
-                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                             style="display: none;">
-                            <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
+                        <div x-cloak x-show="showAddKeyModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                            <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showAddKeyModal = false"></div>
+                            <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
+                                 x-on:keydown.escape.window="showAddKeyModal = false">
                                 <div class="flex items-center justify-between">
                                     <h4 class="text-base font-semibold text-base/90">Add SSH Public Key</h4>
                                     <button type="button"
@@ -584,32 +430,10 @@
                                 <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
                                     <x-ri-question-line class="size-4" />
                                 </button>
-                                <!-- Modal Backdrop -->
-                                <div x-show="open" 
-                                     x-transition:enter="transition ease-out duration-300"
-                                     x-transition:enter-start="opacity-0"
-                                     x-transition:enter-end="opacity-100"
-                                     x-transition:leave="transition ease-in duration-200"
-                                     x-transition:leave-start="opacity-100"
-                                     x-transition:leave-end="opacity-0"
-                                     @click="open = false"
-                                     @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                                     style="display: none;">
-                                </div>
-                                <!-- Modal -->
-                                <div x-show="open"
-                                     x-transition:enter="transition ease-out duration-300"
-                                     x-transition:enter-start="opacity-0 scale-95"
-                                     x-transition:enter-end="opacity-100 scale-100"
-                                     x-transition:leave="transition ease-in duration-200"
-                                     x-transition:leave-start="opacity-100 scale-100"
-                                     x-transition:leave-end="opacity-0 scale-95"
-                                     @click.away="open = false"
-                                     @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                                     style="display: none;">
-                                    <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
+                                <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                                    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
+                                    <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6"
+                                         x-on:keydown.escape.window="open = false">
                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                                             <x-ri-close-line class="size-5" />
                                         </button>
@@ -701,32 +525,10 @@
                     @endforeach
                 </div>
 
-                <!-- Modal Backdrop -->
-                <div x-cloak x-show="showNetworkModal" 
-                     x-transition:enter="transition ease-out duration-300"
-                     x-transition:enter-start="opacity-0"
-                     x-transition:enter-end="opacity-100"
-                     x-transition:leave="transition ease-in duration-200"
-                     x-transition:leave-start="opacity-100"
-                     x-transition:leave-end="opacity-0"
-                     @click="showNetworkModal = false; $wire.cancelEditingNetwork()"
-                     @keydown.escape.window="showNetworkModal = false; $wire.cancelEditingNetwork()"
-                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                     style="display: none;">
-                </div>
-                <!-- Modal -->
-                <div x-cloak x-show="showNetworkModal" 
-                     x-transition:enter="transition ease-out duration-300"
-                     x-transition:enter-start="opacity-0 scale-95"
-                     x-transition:enter-end="opacity-100 scale-100"
-                     x-transition:leave="transition ease-in duration-200"
-                     x-transition:leave-start="opacity-100 scale-100"
-                     x-transition:leave-end="opacity-0 scale-95"
-                     @click.away="showNetworkModal = false; $wire.cancelEditingNetwork()"
-                     @keydown.escape.window="showNetworkModal = false; $wire.cancelEditingNetwork()"
-                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                     style="display: none;">
-                    <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-2xl mx-4 p-5 space-y-4">
+                <div x-cloak x-show="showNetworkModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showNetworkModal = false; $wire.cancelEditingNetwork()"></div>
+                    <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-2xl mx-4 p-5 space-y-4"
+                         x-on:keydown.escape.window="showNetworkModal = false; $wire.cancelEditingNetwork()">
                         <div class="flex items-center justify-between">
                             <h4 class="text-base font-semibold text-base/90">Edit Network Configuration</h4>
                             <button type="button"
@@ -787,32 +589,10 @@
                                 <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
                                     <x-ri-question-line class="size-4" />
                                 </button>
-                                <!-- Modal Backdrop -->
-                                <div x-show="open" 
-                                     x-transition:enter="transition ease-out duration-300"
-                                     x-transition:enter-start="opacity-0"
-                                     x-transition:enter-end="opacity-100"
-                                     x-transition:leave="transition ease-in duration-200"
-                                     x-transition:leave-start="opacity-100"
-                                     x-transition:leave-end="opacity-0"
-                                     @click="open = false"
-                                     @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                                     style="display: none;">
-                                </div>
-                                <!-- Modal -->
-                                <div x-show="open"
-                                     x-transition:enter="transition ease-out duration-300"
-                                     x-transition:enter-start="opacity-0 scale-95"
-                                     x-transition:enter-end="opacity-100 scale-100"
-                                     x-transition:leave="transition ease-in duration-200"
-                                     x-transition:leave-start="opacity-100 scale-100"
-                                     x-transition:leave-end="opacity-0 scale-95"
-                                     @click.away="open = false"
-                                     @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                                     style="display: none;">
-                                    <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
+                                <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                                    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
+                                    <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6"
+                                         x-on:keydown.escape.window="open = false">
                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                                             <x-ri-close-line class="size-5" />
                                         </button>
@@ -869,32 +649,10 @@
                         </div>
                         <p class="text-xs text-base/60">Appended to short hostnames for resolution.</p>
 
-                        <!-- Modal Backdrop -->
-                        <div x-cloak x-show="showDnsDomainModal" 
-                             x-transition:enter="transition ease-out duration-300"
-                             x-transition:enter-start="opacity-0"
-                             x-transition:enter-end="opacity-100"
-                             x-transition:leave="transition ease-in duration-200"
-                             x-transition:leave-start="opacity-100"
-                             x-transition:leave-end="opacity-0"
-                             @click="showDnsDomainModal = false"
-                             @keydown.escape.window="showDnsDomainModal = false"
-                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                             style="display: none;">
-                        </div>
-                        <!-- Modal -->
-                        <div x-cloak x-show="showDnsDomainModal" 
-                             x-transition:enter="transition ease-out duration-300"
-                             x-transition:enter-start="opacity-0 scale-95"
-                             x-transition:enter-end="opacity-100 scale-100"
-                             x-transition:leave="transition ease-in duration-200"
-                             x-transition:leave-start="opacity-100 scale-100"
-                             x-transition:leave-end="opacity-0 scale-95"
-                             @click.away="showDnsDomainModal = false"
-                             @keydown.escape.window="showDnsDomainModal = false"
-                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                             style="display: none;">
-                            <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
+                        <div x-cloak x-show="showDnsDomainModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                            <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showDnsDomainModal = false"></div>
+                            <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
+                                 x-on:keydown.escape.window="showDnsDomainModal = false">
                                 <div class="flex items-center justify-between">
                                     <h4 class="text-base font-semibold text-base/90">Edit DNS Domain</h4>
                                     <button type="button"
@@ -946,32 +704,10 @@
                         </div>
                         <p class="text-xs text-base/60 mt-1">Entries are applied in order. Add one IPv4/IPv6 resolver per line.</p>
 
-                        <!-- Modal Backdrop -->
-                        <div x-cloak x-show="showAddDnsModal" 
-                             x-transition:enter="transition ease-out duration-300"
-                             x-transition:enter-start="opacity-0"
-                             x-transition:enter-end="opacity-100"
-                             x-transition:leave="transition ease-in duration-200"
-                             x-transition:leave-start="opacity-100"
-                             x-transition:leave-end="opacity-0"
-                             @click="showAddDnsModal = false"
-                             @keydown.escape.window="showAddDnsModal = false"
-                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                             style="display: none;">
-                        </div>
-                        <!-- Modal -->
-                        <div x-cloak x-show="showAddDnsModal" 
-                             x-transition:enter="transition ease-out duration-300"
-                             x-transition:enter-start="opacity-0 scale-95"
-                             x-transition:enter-end="opacity-100 scale-100"
-                             x-transition:leave="transition ease-in duration-200"
-                             x-transition:leave-start="opacity-100 scale-100"
-                             x-transition:leave-end="opacity-0 scale-95"
-                             @click.away="showAddDnsModal = false"
-                             @keydown.escape.window="showAddDnsModal = false"
-                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                             style="display: none;">
-                            <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
+                        <div x-cloak x-show="showAddDnsModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                            <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showAddDnsModal = false"></div>
+                            <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
+                                 x-on:keydown.escape.window="showAddDnsModal = false">
                                 <div class="flex items-center justify-between">
                                     <h4 class="text-base font-semibold text-base/90">Add DNS Nameserver</h4>
                                     <button type="button"
@@ -1075,32 +811,10 @@
                                 <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
                                     <x-ri-question-line class="size-4" />
                                 </button>
-                                <!-- Modal Backdrop -->
-                                <div x-show="open" 
-                                     x-transition:enter="transition ease-out duration-300"
-                                     x-transition:enter-start="opacity-0"
-                                     x-transition:enter-end="opacity-100"
-                                     x-transition:leave="transition ease-in duration-200"
-                                     x-transition:leave-start="opacity-100"
-                                     x-transition:leave-end="opacity-0"
-                                     @click="open = false"
-                                     @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                                     style="display: none;">
-                                </div>
-                                <!-- Modal -->
-                                <div x-show="open"
-                                     x-transition:enter="transition ease-out duration-300"
-                                     x-transition:enter-start="opacity-0 scale-95"
-                                     x-transition:enter-end="opacity-100 scale-100"
-                                     x-transition:leave="transition ease-in duration-200"
-                                     x-transition:leave-start="opacity-100 scale-100"
-                                     x-transition:leave-end="opacity-0 scale-95"
-                                     @click.away="open = false"
-                                     @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                                     style="display: none;">
-                                    <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
+                                <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                                    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
+                                    <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6"
+                                         x-on:keydown.escape.window="open = false">
                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                                             <x-ri-close-line class="size-5" />
                                         </button>