boban
/
clusev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): prevent mobile overflow from long URLs and IPv6 bans 

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>
feat/v1-foundation
boban 2026-06-14 12:38:47 +02:00
parent e324b14014
commit 36f5f5c514
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/views/livewire/servers/show.blade.php
View File

@ -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>

6
resources/views/livewire/system/index.blade.php
View File

@ -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