From 0b8500d679e7d63a51499a06935ac5a5828ff086 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 12:06:30 -0500
Subject: [PATCH] feat: enhance Proxmox modals by consolidating escape key
 handling and improving backdrop management for a more streamlined user
 experience

---
 .../Proxmox/views/cloud-init.blade.php        | 211 +++---------------
 .../Servers/Proxmox/views/firewall.blade.php  |  19 +-
 .../Servers/Proxmox/views/overview.blade.php  |  37 ++-
 memory-bank/activeContext.md                  |   1 +
 4 files changed, 63 insertions(+), 205 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/cloud-init.blade.php b/extensions/Servers/Proxmox/views/cloud-init.blade.php
index ad4ca1593..7862e057f 100644
--- a/extensions/Servers/Proxmox/views/cloud-init.blade.php
+++ b/extensions/Servers/Proxmox/views/cloud-init.blade.php
@@ -206,32 +206,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 +269,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 +306,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 +384,12 @@
                                         <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 +424,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"
@@ -701,32 +593,11 @@
                     @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"
@@ -869,32 +740,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"
diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index f234b88fb..d53beac24 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -95,7 +95,7 @@
     /* Drag and Drop Styles */
     .rule-row {
         transition: all 0.2s ease;
-        cursor: move;
+        cursor: default;
     }
     .rule-row.dragging {
         opacity: 0.5;
@@ -114,6 +114,7 @@
     }
     .drag-handle:hover {
         color: rgba(var(--color-primary), 1);
+        cursor: grab;
     }
     .drag-handle:active {
         cursor: grabbing;
@@ -505,13 +506,13 @@
         <!-- Firewall Rules Card -->
         <div class="bg-background border border-neutral rounded-lg p-6"
             x-data="{
-                editingPositions: false,
                 rules: @js($rules),
                 draggedIndex: null,
                 dragOverIndex: null,
                         
                         startDrag(event, index) {
-                            if (!this.editingPositions) {
+                            // Only allow dragging from the handle
+                            if (!event.target.closest('.drag-handle')) {
                                 event.preventDefault();
                                 return;
                             }
@@ -589,14 +590,6 @@
                     </div>
                 </div>
                 <div class="flex gap-2">
-                    <button 
-                        @click="editingPositions = !editingPositions"
-                        class="px-4 py-2 rounded-lg transition-colors text-sm font-medium border"
-                        :class="editingPositions ? 'bg-primary text-white border-primary hover:bg-primary/90' : 'bg-background-secondary text-base border-neutral/20 hover:bg-background-secondary/80'"
-                        :title="editingPositions ? 'Done editing positions' : 'Edit rule positions'">
-                        <x-ri-draggable class="size-4 inline mr-1" />
-                        <span x-text="editingPositions ? 'Done' : 'Edit Positions'"></span>
-                    </button>
                     <button 
                         wire:click="startCreateRule"
                         class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">
@@ -626,7 +619,7 @@
                         <tbody>
                             <template x-for="(rule, index) in rules" :key="rule.pos">
                                 <tr class="rule-row border-b border-neutral/20 hover:bg-background-secondary/50"
-                                    :draggable="editingPositions"
+                                    draggable="true"
                                     @dragstart="startDrag($event, index)"
                                     @dragend="endDrag($event)"
                                     @dragover="dragOver($event, index)"
@@ -634,7 +627,7 @@
                                     @drop="drop($event, index)"
                                     :class="{ 'drag-over': dragOverIndex === index }">
                                     <td class="py-3 px-2 text-sm">
-                                        <div x-show="editingPositions" class="drag-handle" title="Drag to reorder">
+                                        <div class="drag-handle" title="Drag to reorder">
                                             <x-ri-menu-line class="size-4" />
                                         </div>
                                     </td>
diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index 9e270335e..fc5bb3e15 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -101,7 +101,6 @@
                          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">
@@ -313,7 +312,6 @@
                              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">
@@ -444,11 +442,32 @@
                                 </div>
                             </div>
 
-                            <!-- 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()">
+                            <!-- 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()"
+                                 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"
@@ -644,7 +663,6 @@
                                  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">
@@ -748,7 +766,6 @@
                      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">
@@ -954,7 +971,6 @@
              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">
@@ -1224,7 +1240,6 @@
                  x-transition:leave-start="opacity-100 scale-100"
                  x-transition:leave-end="opacity-0 scale-95"
                  @click.away="showExportErrorModal = false"
-                 @keydown.escape.window="showExportErrorModal = false"
                  class="fixed inset-0 z-50 flex items-center justify-center p-4"
                  style="display: none;">
                 <div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md
index 47a5c2f7a..1b1ae360f 100644
--- a/memory-bank/activeContext.md
+++ b/memory-bank/activeContext.md
@@ -2,6 +2,7 @@
 
 - Recent focus areas:
   - **Proxmox Firewall Logs**: Added search padding, multi-select filters, raw CSS styling, modal-based state views, and cross-links to Statistics → Network Analysis. Alpine state handles pagination, filtering, and log detail modals. Fixed filter persistence using Alpine.$persist so policy/protocol selections survive Livewire refreshes.
+  - **Proxmox Overview Modals**: Fixed duplicate `@keydown.escape.window` handlers that were causing escape key events to fire twice. Removed escape handlers from modal container divs, keeping only on backdrop divs to eliminate redundancy. Also re-enabled the previously disabled Hostname Edit Modal.
   - **Network Analysis**: Enhanced search behavior to rely on `data-*` attributes, pre-fill search terms via query params, auto-scroll/highlight when linked from firewall logs, and stabilized lazy loading with Livewire events/timeouts.
   - **NavbarManager**: Fixed parse errors, Filament compatibility, remediated navigation injection w/ schema guards, normalized icon entry to accept any Remix icon, and ensured migrations auto-run when tables missing.
   - **Announcements & Documentation**: Removed automatic navigation tabs when no active data (or at user request) to declutter primary nav.