dashboard(swarm): wrap agent status to two lines, always show set-time

The agent self-reported status rendered on one line with
white-space:nowrap + text-overflow:ellipsis. Because the "(set N ago)"
stamp trailed the text in the same clipped flow, a long status clipped
the set-time away entirely. Wrap the icon + message in a .status-msg
span clamped to two lines and make the age a non-shrinking flex sibling,
so the message wraps to two lines (then ellipsizes) and the set-time is
always shown.
This commit is contained in:
iris 2026-06-18 11:45:00 +02:00 committed by mara
commit 74196ac582
2 changed files with 31 additions and 5 deletions

View file

@ -671,12 +671,18 @@ window.marked = marked;
const ageAttrs = ds.status_set_at != null
? { class: 'status-age', 'data-set-at': String(ds.status_set_at) }
: { class: 'status-age' };
// Icon + message are wrapped together in `.status-msg` so the
// CSS can clamp *just the message* to two lines; the age span is
// a separate flex sibling that is never clipped, so the "(set N
// ago)" stamp stays visible even when the status text is long.
body.append(el('div', {
class: 'agent-status',
title: `agent self-reported status${ageStr}`,
},
el('span', { class: 'status-icon' }, '◈ '),
ds.status_text,
el('span', { class: 'status-msg' },
el('span', { class: 'status-icon' }, '◈ '),
ds.status_text,
),
el('span', ageAttrs, ageStr),
));
}