Fix: Hero-Karten an schmalere Breite angepasst (Legende 2-spaltig, Modellname voll)

Seit die Karten im Hero nur noch 1/3 breit sind:
- System-Status-Legende brach um (DISK fiel in eine eigene Zeile). Jetzt festes
  2-Spalten-Grid -> CPU/RAM oben, GPU/DISK unten (DISK neben GPU), GB-Detail truncatet.
- Aktive-Modelle: inneres Grid (sm:grid-cols-2 xl:grid-cols-3) machte die Zelle winzig
  -> Modellname abgeschnitten. Auf eine Spalte (volle Kartenbreite) -> Name voll sichtbar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
2026-06-27 17:30:29 +02:00
parent 707b812f8b
commit cf65589b93
6 changed files with 13 additions and 13 deletions
@@ -50,11 +50,11 @@ export function ActiveModelsCard() {
Kein Modell geladen Auto-Swap lädt bei Anfrage.
</div>
) : (
<div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
<div className="grid gap-2">
{loaded.map((m) => (
<div key={m.name} className="flex items-center justify-between gap-2 p-3 rounded-xl bg-emerald-500/5 border border-emerald-500/20">
<div className="min-w-0">
<div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5 min-w-0">
{m.role && (
<span className={cn("text-[8px] font-semibold uppercase px-1.5 py-0.5 rounded font-mono border tracking-wider shrink-0",
roleTone(m.role))}>
@@ -40,13 +40,13 @@ export function SystemStatusCard() {
{sys ? (
<>
<div className="mb-1 flex flex-wrap gap-x-5 gap-y-1.5">
<div className="mb-2 grid grid-cols-2 gap-x-4 gap-y-1.5">
{activeSeries.map((s) => (
<div key={s.key} className="flex items-center gap-1.5">
<span className="h-2 w-2 rounded-full" style={{ background: s.color }} />
<span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{s.label}</span>
<span className="font-mono text-xs font-bold tabular-nums text-foreground">{Math.round(current[s.key] ?? 0)}%</span>
{detail[s.key] && <span className="font-mono text-[10px] text-muted-foreground/60">{detail[s.key]}</span>}
<div key={s.key} className="flex min-w-0 items-center gap-1.5">
<span className="h-2 w-2 shrink-0 rounded-full" style={{ background: s.color }} />
<span className="shrink-0 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{s.label}</span>
<span className="shrink-0 font-mono text-xs font-bold tabular-nums text-foreground">{Math.round(current[s.key] ?? 0)}%</span>
{detail[s.key] && <span className="truncate font-mono text-[10px] text-muted-foreground/60">{detail[s.key]}</span>}
</div>
))}
</div>