From 36f5f5c5146c4e81efc2aaad2c7c8b5a052f047e Mon Sep 17 00:00:00 2001
From: boban <boban@git.bave.dev>
Date: Sun, 14 Jun 2026 12:38:47 +0200
Subject: [PATCH] fix(ui): prevent mobile overflow from long URLs and IPv6 bans
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Responsive audit (R7) at 375/768 — all pages were overflow-free with current
data, but three elements overflow with long data the live fleet doesn't have:
- system: the panel URL link (domain up to 253 chars) had no break-all, and the
  access-address dd had truncate without min-w-0 (so a flex child won't clip).
  Add break-all to the link, min-w-0 to the dd, shrink-0 to its label.
- servers/show: the fail2ban banned-IP span had no min-w-0/break, so a banned
  IPv6 pushed the row past 375px. Add min-w-0 break-all + shrink-0 on the button.

Verified by injecting a 100-char domain and long IPv6 into those elements at
375px: document no longer overflows (was 1685px → 375px).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 resources/views/livewire/servers/show.blade.php | 4 ++--
 resources/views/livewire/system/index.blade.php | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/views/livewire/servers/show.blade.php b/resources/views/livewire/servers/show.blade.php
index b856a78..02f3d29 100644
--- a/resources/views/livewire/servers/show.blade.php
+++ b/resources/views/livewire/servers/show.blade.php
@@ -406,8 +406,8 @@
                                             <div class="mt-2 space-y-1">
                                                 @foreach ($jail['bannedIps'] as $ip)
                                                     <div class="flex items-center justify-between gap-2">
-                                                        <span class="font-mono text-[11px] text-ink-2">{{ $ip }}</span>
-                                                        <x-btn variant="secondary" size="sm" wire:click="unbanIp({{ \Illuminate\Support\Js::from($jail['name']) }}, {{ \Illuminate\Support\Js::from($ip) }})">{{ __('common.unlock') }}</x-btn>
+                                                        <span class="min-w-0 break-all font-mono text-[11px] text-ink-2">{{ $ip }}</span>
+                                                        <x-btn variant="secondary" size="sm" class="shrink-0" wire:click="unbanIp({{ \Illuminate\Support\Js::from($jail['name']) }}, {{ \Illuminate\Support\Js::from($ip) }})">{{ __('common.unlock') }}</x-btn>
                                                     </div>
                                                 @endforeach
                                             </div>
diff --git a/resources/views/livewire/system/index.blade.php b/resources/views/livewire/system/index.blade.php
index 9a0be47..7145e94 100644
--- a/resources/views/livewire/system/index.blade.php
+++ b/resources/views/livewire/system/index.blade.php
@@ -27,7 +27,7 @@
                 <div class="min-w-0">
                     <p class="text-sm text-ink">{{ __('system.tls_active_title') }}</p>
                     <p class="mt-0.5 font-mono text-[11px] text-ink-3">{{ __('system.tls_active_body_pre') }}
-                        <a href="{{ $panelUrl }}" class="text-accent-text hover:underline">{{ $panelUrl }}</a> ·
+                        <a href="{{ $panelUrl }}" class="break-all text-accent-text hover:underline">{{ $panelUrl }}</a> ·
                         {{ __('system.tls_active_body_post') }}</p>
                 </div>
             </div>
@@ -77,8 +77,8 @@
             {{-- Current access address (read-only status) --}}
             <dl class="divide-y divide-line overflow-hidden rounded-md border border-line">
                 <div class="flex items-center justify-between gap-3 px-4 py-2.5">
-                    <dt class="text-sm text-ink-2">{{ __('system.access_address') }}</dt>
-                    <dd class="truncate font-mono text-sm text-ink">
+                    <dt class="shrink-0 text-sm text-ink-2">{{ __('system.access_address') }}</dt>
+                    <dd class="min-w-0 truncate font-mono text-sm text-ink">
                         @if ($panelUrl)
                             <a href="{{ $panelUrl }}" class="text-accent-text hover:underline">{{ $panelUrl }}</a>
                         @else