From 413af85fcf1a08f23d4e17020e4b9f59b979a6f5 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 18 Dec 2025 08:23:40 -0500
Subject: [PATCH] fix: refactor firewall management header for improved layout
 and accessibility

---
 .../Servers/Proxmox/views/firewall.blade.php  | 51 ++++++++++---------
 1 file changed, 28 insertions(+), 23 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index bae531630..f09280863 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -187,29 +187,34 @@
 
         {{-- Page Header --}}
         <div :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'" style="transition: all 0.4s ease-out;">
-            <x-proxmox::ui.section-header
-                title="Firewall Management"
-                icon="ri-shield-line"
-                subtitle="Configure firewall rules, policies, aliases, and IPSets for your virtual machine."
-                class="mb-0">
-                <x-slot name="actions">
-                    <x-proxmox::ui.help-modal title="Firewall Management" icon="ri-question-line">
-                        <x-slot name="description">
-                            <p class="text-sm 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.
-                            </p>
-                        </x-slot>
-                        <x-slot name="details">
-                            <div class="space-y-2">
-                                <p class="text-xs text-base/75"><span class="font-semibold text-base/90">Firewall Rules:</span> Create granular rules to allow or block specific traffic patterns.</p>
-                                <p class="text-xs text-base/75"><span class="font-semibold text-base/90">IP Aliases:</span> Define named groups of IP addresses for easier rule management.</p>
-                                <p class="text-xs text-base/75"><span class="font-semibold text-base/90">IP Sets:</span> Manage collections of IP addresses for advanced filtering.</p>
-                                <p class="text-xs text-base/75"><span class="font-semibold text-base/90">Security Logs:</span> Monitor firewall activity and blocked attempts.</p>
-                            </div>
-                        </x-slot>
-                    </x-proxmox::ui.help-modal>
-                </x-slot>
-            </x-proxmox::ui.section-header>
+            <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between group mb-6">
+                <div class="flex items-start gap-3.5">
+                    <div style="width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: .5rem; background: rgba(13, 110, 253, 0.1);" class="transition-transform duration-300 group-hover:scale-105">
+                        <x-ri-shield-line class="size-5 transition-colors duration-200" style="color: #0d6efd;" />
+                    </div>
+                    <div style="display: flex; flex-direction: column; gap: .25rem;">
+                        <div class="flex items-start gap-2">
+                            <h2 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">Firewall Management</h2>
+                            <x-proxmox::ui.help-modal title="Firewall Management" icon="ri-information-line">
+                                <x-slot name="description">
+                                    <p class="text-sm 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.
+                                    </p>
+                                </x-slot>
+                                <x-slot name="details">
+                                    <div class="space-y-2">
+                                        <p class="text-xs text-base/75"><span class="font-semibold text-base/90">Firewall Rules:</span> Create granular rules to allow or block specific traffic patterns.</p>
+                                        <p class="text-xs text-base/75"><span class="font-semibold text-base/90">IP Aliases:</span> Define named groups of IP addresses for easier rule management.</p>
+                                        <p class="text-xs text-base/75"><span class="font-semibold text-base/90">IP Sets:</span> Manage collections of IP addresses for advanced filtering.</p>
+                                        <p class="text-xs text-base/75"><span class="font-semibold text-base/90">Security Logs:</span> Monitor firewall activity and blocked attempts.</p>
+                                    </div>
+                                </x-slot>
+                            </x-proxmox::ui.help-modal>
+                        </div>
+                        <p style="font-size: .875rem; color: #6c757d; margin: 0;">Configure firewall rules, policies, aliases, and IPSets for your virtual machine.</p>
+                    </div>
+                </div>
+            </div>
         </div>
 
         {{-- Error Modal --}}