vinzenz/hyperhive
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

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

35
hive-c0re/assets/dashboard.css
View file

@ -68,9 +68,9 @@ a:hover {
}
.role-m1nd { color: var(--pink); border-color: var(--pink); background: rgba(245, 194, 231, 0.08); }
.role-ag3nt { color: var(--amber); border-color: var(--amber); background: rgba(250, 179, 135, 0.08); }
/* Container rows: identity + meta on a flowing first line, action
buttons grouped on a second. Pending rows dim everything except
the pending-state indicator. */
/* Container rows: a full-height square agent icon on the left, the
identity / actions / drill-in lines stacked in the card body on the
right. Pending rows dim everything except the pending indicator. */
.containers { display: flex; flex-direction: column; gap: 0.4em; }
.container-row {
padding: 0.6em 0.8em;
@ -79,6 +79,29 @@ a:hover {
background: rgba(24, 24, 37, 0.55);
transition: opacity 200ms ease, border-color 200ms ease;
}
/* Live cards get the icon-left / body-right split; tombstone rows keep
the plain stacked block layout. The icon is a background-image div
with no intrinsic size, so its load state can never reflow the row
— and it stretches to the body height, staying square (issue #177). */
.container-row:not(.tombstone) {
display: flex;
align-items: stretch;
gap: 0.7em;
}
.container-row:not(.tombstone) > .container-icon {
flex: none;
align-self: stretch;
aspect-ratio: 1;
border-radius: 6px;
background-color: rgba(17, 17, 27, 0.6);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.container-row .card-body {
flex: 1;
min-width: 0;
}
.container-row.pending {
border-color: var(--amber);
background: rgba(250, 179, 135, 0.05);
@ -95,12 +118,6 @@ a:hover {
font-size: 1.05em;
font-weight: bold;
}
.container-row .head .container-icon {
width: 26px;
height: 26px;
border-radius: 4px;
flex-shrink: 0;
}
.container-row .head .meta { margin-left: auto; }
.container-row .actions {
display: flex;