fix: redesign session log player controls, fix tooltip overlap and drop dot separators

This commit is contained in:
LukeGus committed 2026-10-01 00:09:32 -05:00
1 parent b3c8f37c0d
commit 9015d5dccb
35 files changed
+434 -283

No files matched your search

@@ -428,15 +428,19 @@ export function AutomationsPanel({
</div>
<div className="flex items-center gap-1 mt-1">
<span className="text-[11px] text-muted-foreground flex-1 truncate">
{row.definition
? t(
<span className="text-[11px] text-muted-foreground flex-1 flex gap-2.5 min-w-0 overflow-hidden whitespace-nowrap">
{row.definition && (
<span className="truncate">
{t(
`${base}.triggerKinds.${row.definition.trigger.kind}`,
)
: ""}
{row.last_run_status
? ` · ${timeAgo(row.last_run_at, t)}`
: ""}
)}
</span>
)}
{row.last_run_status && (
<span className="shrink-0">
{timeAgo(row.last_run_at, t)}
</span>
)}
</span>
<Button
variant="ghost"
@@ -499,11 +503,11 @@ export function AutomationsPanel({
{t(`${base}.statuses.${entry.status}`)}
</span>
</div>
<div className="text-[11px] text-muted-foreground">
{timeAgo(entry.started_at, t)}
{entry.duration_ms !== null
? ` · ${Math.round(entry.duration_ms / 100) / 10}s`
: ""}
<div className="flex gap-2.5 text-[11px] text-muted-foreground">
<span>{timeAgo(entry.started_at, t)}</span>
{entry.duration_ms !== null && (
<span>{Math.round(entry.duration_ms / 100) / 10}s</span>
)}
</div>
{entry.error && (
<div className="text-[11px] text-destructive truncate">
@@ -41,7 +41,7 @@ function VisibleBadge({
return (
<Badge
variant="outline"
title={`${active.reasons.join("; ")} · ${active.estimatedEnd}`}
title={`${active.reasons.join("; ")}\n${active.estimatedEnd}`}
>
{title}
</Badge>
@@ -121,9 +121,8 @@ function MaintenanceEditor({
return (
<div className="mx-auto w-full max-w-3xl space-y-6 overflow-auto p-6">
<div>
<h2 className="text-lg font-semibold">
{t("maintenance.title")} · {host.name || host.ip}
</h2>
<h2 className="text-lg font-semibold">{t("maintenance.title")}</h2>
<p className="text-sm font-medium">{host.name || host.ip}</p>
<p className="text-sm text-muted-foreground">
{t("maintenance.description")}
</p>
@@ -308,12 +307,16 @@ function MaintenanceEditor({
>
<div className="min-w-0 space-y-1">
<p className="break-words">{plan.reason}</p>
<p className="text-sm text-muted-foreground">
{t(`maintenance.${plan.recurrence}`)} ·{" "}
{plan.nextStart
? `${plan.nextStart.replace("T", " ").slice(0, 16)} UTC`
: t("maintenance.completed")}{" "}
· {t("maintenance.minutes", { count: plan.durationMinutes })}
<p className="flex flex-wrap gap-x-3 text-sm text-muted-foreground">
<span>{t(`maintenance.${plan.recurrence}`)}</span>
<span>
{plan.nextStart
? `${plan.nextStart.replace("T", " ").slice(0, 16)} UTC`
: t("maintenance.completed")}
</span>
<span>
{t("maintenance.minutes", { count: plan.durationMinutes })}
</span>
</p>
</div>
{canEdit && (