fix(training-studio): stop the run list truncating, and tell the truth about retention

The state badge shared a row with the name AND the subtitle, so the subtitle was
squeezed by the badge's width and clipped on every card. It now sits on the
title's line and the subtitle spans the full card. Nothing in the list truncates
at this viewport any more — measured, not eyeballed — which matters most for a
failed run, where the line carries the refund.

The base model is bold and in the title's colour, so "Flux" or "SDXL" reads at a
glance rather than as the head of a grey run-on.

The heading claimed every run stays here. Runs are kept 30 days; publishing puts
the model on Civitai permanently but does not keep the run in this list. Saying
"stays here" to someone deciding whether to publish gets that backwards.

Not pushed. This is Luis's open PR (#4701); how it lands is his call.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017VMK1EQxkfREacD6PWFU7t
(cherry picked from commit 670e2862e91d6c7d9e9f45f090e9c642a67e5408)
This commit is contained in:
Justin Maier
2026-09-11 17:51:22 -06:00
parent cfdb8d8c2e
commit ae86199046
@@ -34,8 +34,8 @@
<div>
<h2 class="m-0 text-xl font-semibold text-white">My trainings</h2>
<p class="mt-1 text-sm text-dark-2">
Every run stays here — open one for live progress or results, train it further, or start
something new.
Runs stay here for 30 days. Publish one and the model lives on Civitai for good, though the run
itself still leaves this list.
</p>
</div>
<Button onclick={onNew}><IconPlus size={15} stroke={2} class="mr-1.5 inline" />New training</Button>
@@ -73,16 +73,20 @@
></a>
{/if}
<div class="flex items-center gap-3 border-b border-dark-4 p-3.5">
<div class="min-w-0">
<div class="truncate text-sm font-bold text-dark-0 transition-colors group-hover:text-white">
<!-- Badge shares the title's line so the second line gets the full card width: it carries the
refund notice on a failed run, which must not be lost to truncation. -->
<div class="border-b border-dark-4 p-3.5">
<div class="flex items-center gap-3">
<div
class="min-w-0 flex-1 truncate text-sm font-bold text-dark-0 transition-colors group-hover:text-white"
>
{r.name}
</div>
<div class="truncate font-mono text-xs text-dark-2">
{r.base}{r.sub ? ` · ${r.sub}` : ''}
</div>
<RunStateBadge state={r.state} />
</div>
<div class="mt-0.5 truncate font-mono text-xs text-dark-2">
<span class="font-bold text-dark-0">{r.base}</span>{r.sub ? ` · ${r.sub}` : ''}
</div>
<RunStateBadge state={r.state} class="ml-auto" />
</div>
<div class="p-3.5">