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

---
 .../Proxmox/views/cloud-init.blade.php        | 150 +++---------------
 .../Proxmox/views/components/layout.blade.php |   2 +-
 .../Servers/Proxmox/views/overview.blade.php  |  89 +++++++----
 3 files changed, 76 insertions(+), 165 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/cloud-init.blade.php b/extensions/Servers/Proxmox/views/cloud-init.blade.php
index 1eaae33d5..8210a2261 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>
@@ -476,32 +432,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>
@@ -658,32 +592,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>
@@ -902,32 +814,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>
diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index cc2e7517c..18a770f82 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -451,7 +451,7 @@
                         box-shadow: 
                             0 4px 16px rgba(0, 0, 0, 0.15),
                             0 0 0 1px rgba(0, 0, 0, 0.05);
-                        z-index: 50;
+                        z-index: 100;
                         overflow: hidden;
                     }
 
diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index fc5bb3e15..c88f31bff 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -603,42 +603,63 @@
                                 </div>
                             </div>
 
-                                <!-- 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) }},
-                                            copyToClipboard() {
-                                                navigator.clipboard.writeText(this.copyText);
-                                                this.copied = true;
-                                                setTimeout(() => this.copied = false, 3000);
-                                            }
-                                         }">
-                                        <div class="flex items-center justify-between">
-                                            <h4 class="text-base font-semibold text-base/90">Root Password</h4>
-                                            <button type="button"
-                                                    class="bg-background border border-neutral p-1.5 rounded-md hover:bg-background/80"
-                                                    @click="showPasswordViewModal = false"
-                                                    aria-label="Close password view modal">
-                                                <x-ri-close-line class="size-4" />
-                                            </button>
-                                        </div>
-                                        <div class="bg-background border border-neutral rounded-md p-3 text-sm text-base/80 overflow-auto">
-                                            <code class="whitespace-pre-wrap break-all block">{{ $server->password }}</code>
-                                        </div>
-                                        <div class="flex justify-end">
-                                            <button type="button"
-                                                    class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-white text-xs font-semibold hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
-                                                    @click="copyToClipboard()">
-                                                <span x-show="!copied">Copy</span>
-                                                <span x-show="copied">Copied!</span>
-                                            </button>
-                                        </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"
+                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                 style="display: none;"
+                                 x-data="{
+                                     copied: false,
+                                     copyText: {{ json_encode($server->password) }},
+                                     copyToClipboard() {
+                                         navigator.clipboard.writeText(this.copyText);
+                                         this.copied = true;
+                                         setTimeout(() => this.copied = false, 3000);
+                                     }
+                                 }">
+                                <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">Root Password</h4>
+                                        <button type="button"
+                                                class="bg-background border border-neutral p-1.5 rounded-md hover:bg-background/80"
+                                                @click="showPasswordViewModal = false"
+                                                aria-label="Close password view modal">
+                                            <x-ri-close-line class="size-4" />
+                                        </button>
+                                    </div>
+                                    <div class="bg-background border border-neutral rounded-md p-3 text-sm text-base/80 overflow-auto">
+                                        <code class="whitespace-pre-wrap break-all block">{{ $server->password }}</code>
+                                    </div>
+                                    <div class="flex justify-end">
+                                        <button type="button"
+                                                class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-white text-xs font-semibold hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
+                                                @click="copyToClipboard()">
+                                            <span x-show="!copied">Copy</span>
+                                            <span x-show="copied">Copied!</span>
+                                        </button>
                                     </div>
                                 </div>
+                            </div>
 
                             <!-- Password Edit Modal -->
                             <!-- Modal Backdrop -->