vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

26
frontend/packages/dashboard/src/dashboard.css
View file

@ -418,12 +418,32 @@ body.dashboard-shell {
font-size: 0.82em;
color: var(--subtext0);
padding: 0.1em 0.3em 0.25em;
white-space: nowrap;
/* Row layout: the message can wrap to two lines and clamp; the age
stamp is a non-shrinking sibling so it is always shown (it wraps to
the next line if there is no room, but is never clipped away). */
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 0.3em;
}
.agent-status .status-msg {
flex: 0 1 auto;
min-width: 0;
/* Wrap to at most two lines, then ellipsize the overflow. */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: anywhere;
}
.agent-status .status-icon { opacity: 0.65; }
.agent-status .status-age { opacity: 0.5; font-size: 0.9em; margin-left: 0.2em; }
.agent-status .status-age {
flex: 0 0 auto;
opacity: 0.5;
font-size: 0.9em;
white-space: nowrap;
}
.container-row.tombstone {
border-style: dashed;

10
frontend/packages/dashboard/src/tabs.js
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),
));
}