From 02d74bb14773366955e5215ee364d25825da040f Mon Sep 17 00:00:00 2001
From: boban <boban@git.bave.dev>
Date: Mon, 15 Jun 2026 03:06:59 +0200
Subject: [PATCH] ui(servers): full-width lone firewall/fail2ban panel with
 internal 2-col layout

On the Server-Details security section, a single installed tool was capped at
lg:max-w-2xl and left-aligned, leaving a large void to its right. Now a lone
panel spans the full content width and splits its own body into two columns on
lg ($lone flag): firewall = defaults/state | rules list; fail2ban = status
summary + view-bans | whitelist (ignoreip). Two tools keep the side-by-side
lg:grid-cols-2 grid. All wire:click / $dispatch bindings, buttons, and __() keys
preserved; no new lang keys.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../views/livewire/servers/show.blade.php     | 137 +++++++++++-------
 1 file changed, 81 insertions(+), 56 deletions(-)

diff --git a/resources/views/livewire/servers/show.blade.php b/resources/views/livewire/servers/show.blade.php
index bd24244..d5f5545 100644
--- a/resources/views/livewire/servers/show.blade.php
+++ b/resources/views/livewire/servers/show.blade.php
@@ -276,14 +276,20 @@
             $showFw = $fwSupported && ($fwInstalled || $fwReadError);
             $showF2b = $f2bSupported && ($f2bInstalled || $f2bReadError);
             $panelCount = ($showFw ? 1 : 0) + ($showF2b ? 1 : 0);
+
+            // A single installed tool would otherwise sit in a capped, left-aligned box
+            // beside a large void. Instead the lone panel spans the full content width and
+            // splits its OWN body into two columns on lg — a rich, deliberate card rather
+            // than a fragment. Two tools keep the side-by-side grid.
+            $lone = $panelCount === 1;
         @endphp
 
         @if ($panelCount > 0)
-            {{-- Two tools → side-by-side; a lone tool is capped so it doesn't stretch edge-to-edge. --}}
+            {{-- Two tools → side-by-side; a lone tool spans full width and lays its body out
+                 internally in two columns (see $lone), so neither case leaves dead space. --}}
             <div @class([
                 'grid grid-cols-1 gap-3',
                 'lg:grid-cols-2 lg:items-start' => $panelCount === 2,
-                'lg:max-w-2xl' => $panelCount === 1,
             ])>
                 @if ($showFw)
                     {{-- Firewall-Regeln --}}
@@ -313,26 +319,31 @@
                                 </x-btn>
                             </div>
                         @else
-                            <div class="flex flex-wrap items-center gap-2 border-b border-line px-4 py-2.5 sm:px-5">
-                                @if ($fwTool === 'ufw')
-                                    <span class="font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('servers.firewall_default') }}</span>
-                                    <x-badge tone="neutral">{{ __('servers.firewall_incoming', ['value' => $fwDefaults['incoming'] ?? '—']) }}</x-badge>
-                                    <x-badge tone="neutral">{{ __('servers.firewall_outgoing', ['value' => $fwDefaults['outgoing'] ?? '—']) }}</x-badge>
-                                @else
-                                    <span class="font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('servers.firewall_zone') }}</span>
-                                    <x-badge tone="neutral">{{ $fwDefaults['zone'] ?? '—' }}</x-badge>
-                                @endif
-                            </div>
+                            {{-- Lone firewall: defaults/state in the left column, rules list in the
+                                 right. Two-tool case keeps the single stacked column. --}}
+                            <div @class(['lg:grid lg:grid-cols-2 lg:divide-x lg:divide-line' => $lone])>
+                                <div>
+                                    <div class="flex flex-wrap items-center gap-2 border-b border-line px-4 py-2.5 sm:px-5">
+                                        @if ($fwTool === 'ufw')
+                                            <span class="font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('servers.firewall_default') }}</span>
+                                            <x-badge tone="neutral">{{ __('servers.firewall_incoming', ['value' => $fwDefaults['incoming'] ?? '—']) }}</x-badge>
+                                            <x-badge tone="neutral">{{ __('servers.firewall_outgoing', ['value' => $fwDefaults['outgoing'] ?? '—']) }}</x-badge>
+                                        @else
+                                            <span class="font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('servers.firewall_zone') }}</span>
+                                            <x-badge tone="neutral">{{ $fwDefaults['zone'] ?? '—' }}</x-badge>
+                                        @endif
+                                    </div>
 
-                            @if ($fwReadOnly)
-                                <div class="flex items-start gap-2.5 border-b border-line bg-inset px-4 py-2.5 sm:px-5">
-                                    <x-icon name="lock" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-ink-4" />
-                                    <p class="font-mono text-[11px] leading-relaxed text-ink-3">{{ __('servers.firewall_readonly') }}</p>
+                                    @if ($fwReadOnly)
+                                        <div class="flex items-start gap-2.5 border-b border-line bg-inset px-4 py-2.5 sm:px-5">
+                                            <x-icon name="lock" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-ink-4" />
+                                            <p class="font-mono text-[11px] leading-relaxed text-ink-3">{{ __('servers.firewall_readonly') }}</p>
+                                        </div>
+                                    @endif
                                 </div>
-                            @endif
 
-                            <div class="divide-y divide-line">
-                                @forelse ($fwRules as $rule)
+                                <div class="divide-y divide-line">
+                                    @forelse ($fwRules as $rule)
                                     {{-- $ruleTone, NOT $tone: the page-level $tone is a closure used by the
                                          gauges/Volumes panel; reusing the name here would clobber it. --}}
                                     @php $ruleTone = $actTone[$rule['action'] ?? 'ALLOW'] ?? 'online'; @endphp
@@ -362,11 +373,12 @@
                                             </x-btn>
                                         @endunless
                                     </div>
-                                @empty
-                                    <div class="px-4 py-4 sm:px-5">
-                                        <p class="font-mono text-[11px] text-ink-3">{{ __('servers.firewall_no_rules') }}</p>
-                                    </div>
-                                @endforelse
+                                    @empty
+                                        <div class="px-4 py-4 sm:px-5">
+                                            <p class="font-mono text-[11px] text-ink-3">{{ __('servers.firewall_no_rules') }}</p>
+                                        </div>
+                                    @endforelse
+                                </div>
                             </div>
                         @endif
                     </x-panel>
@@ -404,39 +416,52 @@
                                 </x-btn>
                             </div>
                         @else
-                            {{-- Compact summary; the full jail/banned-IP list (which can grow very
-                                 long) lives in a scrollable modal, opened via the button below. --}}
-                            <div class="flex flex-wrap items-center justify-between gap-3 border-b border-line px-4 py-3 sm:px-5">
-                                <p class="font-mono text-[11px] text-ink-3">
-                                    <span class="text-online">{{ __('common.active') }}</span>
-                                    · <span @class(['text-offline' => $f2bBanned > 0])>{{ __('servers.fail2ban_banned', ['count' => $f2bBanned]) }}</span>
-                                    · {{ __('servers.fail2ban_jails_count', ['count' => count($f2bJails)]) }}
-                                </p>
-                                <x-btn variant="secondary" size="sm" class="shrink-0"
-                                       wire:click="$dispatch('openModal', { component: 'modals.fail2ban-bans', arguments: { serverId: {{ $server->id }} } })">
-                                    <x-icon name="lock" class="h-3.5 w-3.5" /> {{ __('servers.fail2ban_view_bans') }}
-                                </x-btn>
-                            </div>
-
-                            {{-- Whitelist (ignoreip) --}}
-                            <div class="border-t border-line px-4 py-3 sm:px-5">
-                                <p class="mb-2 font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('servers.whitelist_label') }}</p>
-                                <div class="flex flex-wrap gap-1.5">
-                                    @foreach ($f2bIgnore as $ip)
-                                        <span class="inline-flex items-center gap-1.5 rounded-sm border border-line bg-inset px-2 py-1 font-mono text-[11px] text-ink-2">
-                                            {{ $ip }}
-                                            @unless (in_array($ip, ['127.0.0.1/8', '::1'], true))
-                                                <button type="button" wire:click="removeIgnore({{ \Illuminate\Support\Js::from($ip) }})" class="text-ink-4 hover:text-offline" title="{{ __('common.remove') }}">
-                                                    <x-icon name="x" class="h-3 w-3" />
-                                                </button>
-                                            @endunless
-                                        </span>
-                                    @endforeach
+                            {{-- Lone fail2ban: status summary + "Gesperrte IPs ansehen" in the left
+                                 column, the whitelist (ignoreip) management in the right. Two-tool
+                                 case keeps the single stacked column. --}}
+                            <div @class(['lg:grid lg:grid-cols-2 lg:divide-x lg:divide-line' => $lone])>
+                                {{-- Compact summary; the full jail/banned-IP list (which can grow very
+                                     long) lives in a scrollable modal, opened via the button below. --}}
+                                <div @class([
+                                    'flex flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-5',
+                                    'border-b border-line lg:border-b-0' => $lone,
+                                    'border-b border-line' => ! $lone,
+                                ])>
+                                    <p class="font-mono text-[11px] text-ink-3">
+                                        <span class="text-online">{{ __('common.active') }}</span>
+                                        · <span @class(['text-offline' => $f2bBanned > 0])>{{ __('servers.fail2ban_banned', ['count' => $f2bBanned]) }}</span>
+                                        · {{ __('servers.fail2ban_jails_count', ['count' => count($f2bJails)]) }}
+                                    </p>
+                                    <x-btn variant="secondary" size="sm" class="shrink-0"
+                                           wire:click="$dispatch('openModal', { component: 'modals.fail2ban-bans', arguments: { serverId: {{ $server->id }} } })">
+                                        <x-icon name="lock" class="h-3.5 w-3.5" /> {{ __('servers.fail2ban_view_bans') }}
+                                    </x-btn>
                                 </div>
-                                <div class="mt-2.5 flex items-center gap-2">
-                                    <input wire:model="newIgnoreIp" wire:keydown.enter="addIgnore" type="text" placeholder="{{ __('servers.whitelist_placeholder') }}"
-                                           class="h-8 w-full max-w-xs rounded-md border border-line bg-inset px-2.5 font-mono text-[11px] text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
-                                    <x-btn variant="secondary" size="sm" wire:click="addIgnore">{{ __('common.add') }}</x-btn>
+
+                                {{-- Whitelist (ignoreip) --}}
+                                <div @class([
+                                    'px-4 py-3 sm:px-5',
+                                    'border-t border-line lg:border-t-0' => $lone,
+                                    'border-t border-line' => ! $lone,
+                                ])>
+                                    <p class="mb-2 font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('servers.whitelist_label') }}</p>
+                                    <div class="flex flex-wrap gap-1.5">
+                                        @foreach ($f2bIgnore as $ip)
+                                            <span class="inline-flex items-center gap-1.5 rounded-sm border border-line bg-inset px-2 py-1 font-mono text-[11px] text-ink-2">
+                                                {{ $ip }}
+                                                @unless (in_array($ip, ['127.0.0.1/8', '::1'], true))
+                                                    <button type="button" wire:click="removeIgnore({{ \Illuminate\Support\Js::from($ip) }})" class="text-ink-4 hover:text-offline" title="{{ __('common.remove') }}">
+                                                        <x-icon name="x" class="h-3 w-3" />
+                                                    </button>
+                                                @endunless
+                                            </span>
+                                        @endforeach
+                                    </div>
+                                    <div class="mt-2.5 flex items-center gap-2">
+                                        <input wire:model="newIgnoreIp" wire:keydown.enter="addIgnore" type="text" placeholder="{{ __('servers.whitelist_placeholder') }}"
+                                               class="h-8 w-full max-w-xs rounded-md border border-line bg-inset px-2.5 font-mono text-[11px] text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
+                                        <x-btn variant="secondary" size="sm" wire:click="addIgnore">{{ __('common.add') }}</x-btn>
+                                    </div>
                                 </div>
                             </div>
                         @endif