style: center error message display in Proxmox firewall view for better visibility and user experience

This commit is contained in:
2025-12-01 13:12:27 -05:00
parent f02df89d15
commit a699176696

View File

@@ -53,18 +53,20 @@
<div class="space-y-6">
<!-- Error Message - Top of Page -->
@if($error)
<div class="bg-error/20 border-2 border-error rounded-lg p-4 shadow-lg">
<div class="flex items-start gap-3">
<x-ri-error-warning-fill class="size-5 text-error flex-shrink-0 mt-0.5" />
<div class="flex-1">
<h3 class="text-base font-semibold text-error mb-1">Firewall Error</h3>
<p class="text-sm text-error/90 leading-relaxed">{{ $error }}</p>
<div class="flex justify-center">
<div class="bg-error/20 border-2 border-error rounded-lg p-4 shadow-lg max-w-2xl w-full">
<div class="flex items-start gap-3">
<x-ri-error-warning-fill class="size-5 text-error flex-shrink-0 mt-0.5" />
<div class="flex-1 text-center">
<h3 class="text-base font-semibold text-error mb-1">Firewall Error</h3>
<p class="text-sm text-error/90 leading-relaxed">{{ $error }}</p>
</div>
<button
wire:click="$set('error', '')"
class="text-error/70 hover:text-error transition-colors flex-shrink-0">
<x-ri-close-line class="size-5" />
</button>
</div>
<button
wire:click="$set('error', '')"
class="text-error/70 hover:text-error transition-colors flex-shrink-0">
<x-ri-close-line class="size-5" />
</button>
</div>
</div>
@endif