From 1c6e54de81bf763f168f8e5661ebb7103e33b8d9 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 18 Dec 2025 09:22:55 -0500
Subject: [PATCH] fix: refactor firewall management modal for improved
 accessibility and styling

---
 .../Servers/Proxmox/views/firewall.blade.php  | 116 +++++++++---------
 1 file changed, 57 insertions(+), 59 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index f2abf02a0..c8f49013b 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -195,72 +195,70 @@
                     <div style="display: flex; flex-direction: column; gap: .25rem;">
                         <div class="flex items-center gap-2">
                             <h2 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">Firewall Management</h2>
-                            <div class="relative" x-data="{ open: false }" x-cloak>
+                            <div x-data="{ open: false }" x-cloak>
                                 <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-[60] 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-[60] 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">
-                                        <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>
-                                        <div class="flex items-center gap-3 mb-4 pr-8">
-                                            <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                                <x-ri-shield-line class="size-5 text-primary" />
+                                <template x-teleport="body">
+                                    <!-- 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"
+                                         class="fixed inset-0 z-[9998] bg-black/50 backdrop-blur-sm">
+                                    </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"
+                                         @keydown.escape.window="open = false"
+                                         class="fixed inset-0 z-[9999] flex items-center justify-center p-4">
+                                        <div @click.outside="open = false" class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 shadow-2xl p-6">
+                                            <button @click="open = false" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
+                                                <x-ri-close-line class="size-5" />
+                                            </button>
+                                            <div class="flex items-center gap-3 mb-4 pr-8">
+                                                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+                                                    <x-ri-shield-line class="size-5 text-primary" />
+                                                </div>
+                                                <h6 class="text-lg font-semibold">
+                                                    Firewall Management
+                                                </h6>
                                             </div>
-                                            <h6 class="font-sans text-lg font-semibold leading-tight">
-                                                Firewall Management
-                                            </h6>
-                                        </div>
-                                        <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                                            The Firewall Management interface provides comprehensive control over your virtual machine's network security, including rule-based filtering, IP aliases, and security policies. Configure granular rules to allow or block specific traffic patterns, manage default policies for incoming and outgoing traffic, and organize IP addresses into reusable aliases and sets.
-                                        </p>
-                                        <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
-                                            <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                                <span class="font-semibold text-base/90">Firewall Rules:</span> Create granular rules to allow or block specific traffic patterns based on source/destination IP addresses, protocols, ports, and network interfaces. Rules are processed in order with the first matching rule determining the action.
-                                            </p>
-                                            <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                                <span class="font-semibold text-base/90">Default Policies:</span> Set default actions (ACCEPT, REJECT, or DROP) for incoming and outgoing traffic that doesn't match any specific rule. Use DROP for incoming traffic to create a secure whitelist configuration.
-                                            </p>
-                                            <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                                <span class="font-semibold text-base/90">IP Aliases:</span> Define named groups of IP addresses or CIDR ranges for easier rule management. Use aliases to create reusable address definitions that can be referenced in multiple rules.
-                                            </p>
-                                            <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                                <span class="font-semibold text-base/90">IP Sets:</span> Manage collections of IP addresses for advanced filtering scenarios. IP Sets allow you to create groups of addresses that can be efficiently matched against traffic.
-                                            </p>
-                                            <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                                <span class="font-semibold text-base/90">Firewall Logs:</span> Monitor firewall activity and view logged events when rules with logging enabled are triggered. Logs help troubleshoot connectivity issues and identify security threats.
-                                            </p>
-                                            <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                                <span class="font-semibold text-base/90">Network Adapters:</span> Control firewall state independently for each network adapter attached to your VM. This allows granular control over which interfaces have firewall protection enabled.
+                                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                                                The Firewall Management interface provides comprehensive control over your virtual machine's network security, including rule-based filtering, IP aliases, and security policies. Configure granular rules to allow or block specific traffic patterns, manage default policies for incoming and outgoing traffic, and organize IP addresses into reusable aliases and sets.
                                             </p>
+                                            <div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-700 space-y-2.5">
+                                                <p class="text-xs text-gray-500 dark:text-gray-400">
+                                                    <span class="font-semibold text-gray-700 dark:text-gray-300">Firewall Rules:</span> Create granular rules to allow or block specific traffic patterns based on source/destination IP addresses, protocols, ports, and network interfaces. Rules are processed in order with the first matching rule determining the action.
+                                                </p>
+                                                <p class="text-xs text-gray-500 dark:text-gray-400">
+                                                    <span class="font-semibold text-gray-700 dark:text-gray-300">Default Policies:</span> Set default actions (ACCEPT, REJECT, or DROP) for incoming and outgoing traffic that doesn't match any specific rule. Use DROP for incoming traffic to create a secure whitelist configuration.
+                                                </p>
+                                                <p class="text-xs text-gray-500 dark:text-gray-400">
+                                                    <span class="font-semibold text-gray-700 dark:text-gray-300">IP Aliases:</span> Define named groups of IP addresses or CIDR ranges for easier rule management. Use aliases to create reusable address definitions that can be referenced in multiple rules.
+                                                </p>
+                                                <p class="text-xs text-gray-500 dark:text-gray-400">
+                                                    <span class="font-semibold text-gray-700 dark:text-gray-300">IP Sets:</span> Manage collections of IP addresses for advanced filtering scenarios. IP Sets allow you to create groups of addresses that can be efficiently matched against traffic.
+                                                </p>
+                                                <p class="text-xs text-gray-500 dark:text-gray-400">
+                                                    <span class="font-semibold text-gray-700 dark:text-gray-300">Firewall Logs:</span> Monitor firewall activity and view logged events when rules with logging enabled are triggered. Logs help troubleshoot connectivity issues and identify security threats.
+                                                </p>
+                                                <p class="text-xs text-gray-500 dark:text-gray-400">
+                                                    <span class="font-semibold text-gray-700 dark:text-gray-300">Network Adapters:</span> Control firewall state independently for each network adapter attached to your VM. This allows granular control over which interfaces have firewall protection enabled.
+                                                </p>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
+                                </template>
                             </div>
                         </div>
                         <p style="font-size: .875rem; color: #6c757d; margin: 0;">Configure firewall rules, policies, aliases, and IPSets for your virtual machine.</p>