Responsive-Härtung: Seiten-Header, Kontextleiste, Stat-Cards

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Kevin Adametz 2026-06-12 14:08:08 +00:00
parent bda755fcf8
commit 036a53499f
55 changed files with 128 additions and 57 deletions

View file

@ -9,9 +9,11 @@
{{-- Hub-Stil-Banner: Hub-Soft-Hintergrund, Hub-Blau-Badge,
dezente Buchpapier-Rule. Ersetzt das Zinc-Starter-Kit-Card. --}}
<div class="mb-6 rounded-md border border-hub-soft-2 bg-hub-soft/50 px-4 py-3">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
{{-- Erst ab lg nebeneinander: zwischen sm und lg reichte die
Breite nicht für Badges + Switcher, Inhalte überlappten. --}}
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
<div class="min-w-0">
<div class="flex items-center gap-2.5">
<div class="flex flex-wrap items-center gap-2.5">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-hub-soft text-hub text-[10.5px] font-bold tracking-[0.10em] uppercase">
<span class="w-1.5 h-1.5 rounded-full bg-hub"></span>
{{ __('User Backend') }}
@ -25,7 +27,7 @@
</h2>
</div>
<div class="w-full sm:w-auto">
<div class="w-full lg:w-auto">
<livewire:customer.company-switcher />
</div>
</div>

View file

@ -21,8 +21,10 @@
<article {{ $attributes->class(['stat-card', "is-{$variant}"]) }}>
<span class="stat-strip"></span>
<div class="flex items-baseline justify-between gap-3">
<div class="stat-label">{{ $label }}</div>
{{-- flex-wrap: auf schmalen Karten rutscht das Meta unter das Label,
statt mit ihm zu kollidieren --}}
<div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5">
<div class="stat-label min-w-0">{{ $label }}</div>
@isset($meta)
<span class="stat-meta">{{ $meta }}</span>