fix(settings): horizontally scroll the tab bar on mobile (5 tabs overflowed the viewport)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat/v1-foundation
boban 2026-06-15 06:34:54 +02:00
parent b91895e103
commit bcf27d25ab
2 changed files with 4 additions and 2 deletions

View File

@ -31,6 +31,8 @@ getaggte Releases (Kanal `stable`, optional `beta`) — niemals Entwicklungs-Bui
beides — nicht mehr „nur als zweiter Faktor".
- **System-Seite:** TLS-Modus-Schalter bricht nicht mehr um (kürzeres Label, Details in der
Beschreibung); Domain-Feld zeigt nur noch einen Platzhalter (kein vorausgefüllter Beispielwert).
- **Einstellungen mobil:** die Tab-Leiste ist breiter als der Schirm geworden — jetzt horizontal
scrollbar und sauber abgeschnitten (auf Desktop weiterhin vertikal).
## [0.9.0] - 2026-06-14

View File

@ -37,10 +37,10 @@
<div class="grid grid-cols-1 gap-5 lg:grid-cols-[200px_minmax(0,1fr)]">
{{-- Section nav --}}
<nav class="flex gap-1 lg:flex-col">
<nav class="flex min-w-0 gap-1 overflow-x-auto lg:flex-col lg:overflow-visible">
@foreach ($tabs as $t)
<button type="button" wire:click="$set('tab', '{{ $t['key'] }}')" @class([
'inline-flex min-h-10 flex-1 items-center gap-2 rounded-md px-3 text-sm transition-colors lg:flex-none',
'inline-flex min-h-10 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors',
'bg-accent/10 text-accent-text shadow-[inset_2px_0_0_var(--color-accent)]' => $tab === $t['key'],
'text-ink-2 hover:bg-raised hover:text-ink' => $tab !== $t['key'],
])>