diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css index 8dda2a6d..a837d12a 100644 --- a/frontend/packages/dashboard/src/dashboard.css +++ b/frontend/packages/dashboard/src/dashboard.css @@ -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; diff --git a/frontend/packages/dashboard/src/tabs.js b/frontend/packages/dashboard/src/tabs.js index 095698ad..ee69e53a 100644 --- a/frontend/packages/dashboard/src/tabs.js +++ b/frontend/packages/dashboard/src/tabs.js @@ -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), )); }