dashboard: full-height square agent icon, icon-left card layout

The agent icon was a 26px <img> inline in the card head, hidden via
onerror when a stopped container's web server didn't answer — which
collapsed the slot and shifted the row.

Restructure the live container card as icon-left / body-right:
- the icon is a background-image div with aspect-ratio 1 and
  align-self stretch — full card height, square, and (being a
  background) it has no intrinsic size, so loading or failing it
  can never reflow the row;
- a failed load (stopped container) falls through to a placeholder
  fill instead of collapsing;
- the three content lines move into a .card-body column.

Tombstone rows keep the plain stacked layout (:not(.tombstone)).

closes #177
This commit is contained in:
iris 2026-05-21 19:19:47 +02:00
parent 3b44410427
commit 9abcda280a
3 changed files with 50 additions and 23 deletions

View file

@ -148,7 +148,10 @@ the previous process's socket release resolves itself.
### Container row
Two-line layout (`assets/app.js::renderContainers`):
A full-height **square agent icon** on the left (the agent's
`/icon`, painted as a background-image div so its load state can
never reflow the row), and the card body on the right with three
stacked lines (`assets/app.js::renderContainers`):
- Line 1: agent name (link → new tab), m1nd/ag3nt chip, status
badges — `⊘ rate limited` (red, while the harness is parked