From ccf8ae5b34c1b0bf2344942beb69fff55610fc77 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 11:53:17 -0500
Subject: [PATCH] feat: enhance hostname edit modal in Proxmox view with
 improved transition effects and backdrop handling for better user experience

---
 .../Servers/Proxmox/views/overview.blade.php  | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index 45f37fdd7..361c1855a 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -445,10 +445,32 @@
                             </div>
 
                             <!-- Hostname Edit Modal -->
-                            <div x-cloak x-show="showHostnameEditModal" 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="showHostnameEditModal = false; $wire.cancelEditingHostname()"></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()">
+                            <!-- 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">
                                     <div class="flex items-center justify-between">
                                         <h4 class="text-base font-semibold text-base/90">Edit Hostname</h4>
                                         <button type="button"