From 09d4e7a857cf7743488231986269045dbcdb8fd6 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 12:02:37 -0500
Subject: [PATCH] feat: enhance cloud-init and overview modals in Proxmox with
 improved transition effects and backdrop handling for better user experience

---
 .../Proxmox/views/cloud-init.blade.php        | 241 +++++++++++++++---
 .../Servers/Proxmox/views/overview.blade.php  |  92 +++----
 2 files changed, 242 insertions(+), 91 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/cloud-init.blade.php b/extensions/Servers/Proxmox/views/cloud-init.blade.php
index 1eaae33d5..ad4ca1593 100644
--- a/extensions/Servers/Proxmox/views/cloud-init.blade.php
+++ b/extensions/Servers/Proxmox/views/cloud-init.blade.php
@@ -206,10 +206,32 @@
                         </div>
                         <p class="text-xs text-base/60">Use distro-friendly names. Leave blank to keep the template default.</p>
 
-                        <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">
+                        <!-- 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 class="flex items-center justify-between">
                                     <h4 class="text-base font-semibold text-base/90">Edit Cloud-init User</h4>
                                     <button type="button"
@@ -269,10 +291,32 @@
                         <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)
-                            <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>
+                            <!-- 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 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) }},
@@ -306,10 +350,32 @@
                             </div>
                         @endif
 
-                        <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()">
+                        <!-- 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 class="flex items-center justify-between">
                                     <h4 class="text-base font-semibold text-base/90">Edit Root Password</h4>
                                     <button type="button"
@@ -384,12 +450,32 @@
                                         <x-ri-close-line class="inline size-4" />
                                     </button>
 
-                                    <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">
+                                    <!-- 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 class="flex items-center justify-between">
                                                 <h4 class="text-base font-semibold text-base/90">SSH Public Key</h4>
                                                 <button type="button"
@@ -424,10 +510,32 @@
                         </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>
 
-                        <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">
+                        <!-- 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 class="flex items-center justify-between">
                                     <h4 class="text-base font-semibold text-base/90">Add SSH Public Key</h4>
                                     <button type="button"
@@ -593,11 +701,32 @@
                     @endforeach
                 </div>
 
-                <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()">
+                <!-- 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 class="flex items-center justify-between">
                             <h4 class="text-base font-semibold text-base/90">Edit Network Configuration</h4>
                             <button type="button"
@@ -740,10 +869,32 @@
                         </div>
                         <p class="text-xs text-base/60">Appended to short hostnames for resolution.</p>
 
-                        <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">
+                        <!-- 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 class="flex items-center justify-between">
                                     <h4 class="text-base font-semibold text-base/90">Edit DNS Domain</h4>
                                     <button type="button"
@@ -795,10 +946,32 @@
                         </div>
                         <p class="text-xs text-base/60 mt-1">Entries are applied in order. Add one IPv4/IPv6 resolver per line.</p>
 
-                        <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">
+                        <!-- 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 class="flex items-center justify-between">
                                     <h4 class="text-base font-semibold text-base/90">Add DNS Nameserver</h4>
                                     <button type="button"
diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index 75f7639b6..9e270335e 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -444,33 +444,11 @@
                                 </div>
                             </div>
 
-                            <!-- Hostname Edit Modal -->
-                            <!-- Modal Backdrop -->
-                            <div x-cloak x-show="showHostnameEditModal" 
-                                 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="showHostnameEditModal = false; $wire.cancelEditingHostname()"
-                                 @keydown.escape.window="showHostnameEditModal = false; $wire.cancelEditingHostname()"
-                                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                                 style="display: none;">
-                            </div>
-                            <!-- Modal -->
-                            <div x-cloak x-show="showHostnameEditModal" 
-                                 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="showHostnameEditModal = false; $wire.cancelEditingHostname()"
-                                 @keydown.escape.window="showHostnameEditModal = false; $wire.cancelEditingHostname()"
-                                 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">
+                            <!-- Hostname Edit Modal - DISABLED OLD STRUCTURE -->
+                            <div style="display: none !important;">
+                                <div></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="showHostnameEditModal = false; $wire.cancelEditingHostname()">
                                     <div class="flex items-center justify-between">
                                         <h4 class="text-base font-semibold text-base/90">Edit Hostname</h4>
                                         <button type="button"
@@ -606,33 +584,11 @@
                                 </div>
                             </div>
 
-                                <!-- Password View Modal -->
-                                <!-- 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;">
+                                <!-- Password View Modal - DISABLED OLD STRUCTURE -->
+                                <div style="display: none !important;">
+                                    <div></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) }},
@@ -666,10 +622,32 @@
                                 </div>
 
                             <!-- Password Edit Modal -->
-                            <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()">
+                            <!-- 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 class="flex items-center justify-between">
                                         <h4 class="text-base font-semibold text-base/90">Edit Root Password</h4>
                                         <button type="button"