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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user