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
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -7,8 +7,8 @@
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>Mission Control 2.0</title>
<script type="module" crossorigin src="/assets/index-C5hFzdtR.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DoKkh4fz.css">
<script type="module" crossorigin src="/assets/index-BpalJKIe.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CeszaZ7k.css">
</head>
<body>
<div id="root"></div>
@@ -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>