From d12457d4f7a8dbcc842e4c729745b777d088eebc Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 12:28:42 -0500
Subject: [PATCH] refactor: standardize modal backdrop handling across Proxmox
 views for improved consistency and user experience

---
 .../Proxmox/views/boot-order.blade.php        | 19 +++++++++-----
 .../Proxmox/views/cloud-init.blade.php        | 26 +++++++++----------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/boot-order.blade.php b/extensions/Servers/Proxmox/views/boot-order.blade.php
index 207ca2300..136dd4f14 100644
--- a/extensions/Servers/Proxmox/views/boot-order.blade.php
+++ b/extensions/Servers/Proxmox/views/boot-order.blade.php
@@ -303,15 +303,22 @@
                     </div>
                 </div>
 
-                <div class="grid grid-cols-1 lg:grid-cols-[2fr_auto] gap-3 items-start">
-                    <div class="relative min-w-0">
+                <div class="flex flex-col sm:flex-row gap-2 items-stretch sm:items-center">
+                    <div class="relative flex-1 min-w-0">
                         <select id="iso-selection-{{ $drive }}" 
                                 wire:model.live="selectedIsos.{{ $drive }}"
-                                class="w-full bg-background border border-neutral rounded-md px-3 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-secondary">
+                                class="w-full bg-background border border-neutral rounded-md pl-3 pr-10 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary appearance-none">
                             @foreach($isoOptions as $option)
                                 <option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
                             @endforeach
                         </select>
+                        <!-- Dropdown Arrow Icon -->
+                        <div class="absolute right-8 top-1/2 -translate-y-1/2 pointer-events-none">
+                            <svg class="w-4 h-4 text-base/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                            </svg>
+                        </div>
+                        <!-- Help Modal Icon -->
                         <div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
                             <div class="relative" x-data="{ open: false }" x-cloak>
                                 <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors pointer-events-auto">
@@ -370,10 +377,10 @@
                             </div>
                         </div>
                     </div>
-                    <div class="flex gap-2 w-full lg:w-auto lg:min-w-[260px]">
+                    <div class="flex gap-2 w-full sm:w-auto">
                         <x-button.primary wire:click="applyIso('{{ $drive }}')" 
                                           wire:loading.attr="disabled"
-                                          class="flex-1"
+                                          class="flex-1 sm:flex-initial"
                                           :disabled="($currentIsos[$drive] ?? 'none') === ($selectedIsos[$drive] ?? 'none')">
                             <x-loading target="applyIso('{{ $drive }}')" />
                             <span wire:loading.remove wire:target="applyIso('{{ $drive }}')">Apply</span>
@@ -381,7 +388,7 @@
                         </x-button.primary>
                         <x-button.danger wire:click="ejectIso('{{ $drive }}')" 
                                          wire:loading.attr="disabled"
-                                         class="flex-1"
+                                         class="flex-1 sm:flex-initial"
                                          :disabled="!isset($currentIsos[$drive]) || $currentIsos[$drive] === 'none'">
                             <x-loading target="ejectIso('{{ $drive }}')" />
                             <span wire:loading.remove wire:target="ejectIso('{{ $drive }}')">Eject</span>
diff --git a/extensions/Servers/Proxmox/views/cloud-init.blade.php b/extensions/Servers/Proxmox/views/cloud-init.blade.php
index cf8d7750e..f20f15f02 100644
--- a/extensions/Servers/Proxmox/views/cloud-init.blade.php
+++ b/extensions/Servers/Proxmox/views/cloud-init.blade.php
@@ -54,7 +54,7 @@
                         <x-ri-question-line class="size-4" />
                     </button>
                     <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="fixed 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">
@@ -103,7 +103,7 @@
                                     <x-ri-question-line class="size-4" />
                                 </button>
                                 <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="fixed 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">
@@ -163,7 +163,7 @@
                         <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="fixed 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">
@@ -226,7 +226,7 @@
 
                         @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>
+                                <div class="fixed 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="{
@@ -263,7 +263,7 @@
                         @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="fixed 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">
@@ -341,7 +341,7 @@
                                     </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="fixed 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">
@@ -379,7 +379,7 @@
                         <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="fixed 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">
@@ -431,7 +431,7 @@
                                     <x-ri-question-line class="size-4" />
                                 </button>
                                 <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="fixed 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">
@@ -526,7 +526,7 @@
                 </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="fixed 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">
@@ -590,7 +590,7 @@
                                     <x-ri-question-line class="size-4" />
                                 </button>
                                 <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="fixed 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">
@@ -650,7 +650,7 @@
                         <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="fixed 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">
@@ -705,7 +705,7 @@
                         <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="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showAddDnsModal = false"></div>
                             <div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
                                  x-on:keydown.escape.window="showAddDnsModal = false">
                                 <div class="flex items-center justify-between">
@@ -812,7 +812,7 @@
                                     <x-ri-question-line class="size-4" />
                                 </button>
                                 <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="fixed 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">