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

dashboard: pin agent icon at a fixed size

Browse source 
`.container-icon` had `align-self: stretch` + `aspect-ratio: 1`, so
the square's width tracked the body's height. As soon as state pills
(rate-limited / needs-login / needs-update / ctx) wrapped the head
row, the body grew taller and the icon grew with it — two cards
with different state ended up with visibly different-sized icons
(issue #344).

Pin the icon at 5em; height follows from aspect-ratio. Card-level
`align-items` drops to flex-start so a row taller than the icon
doesn't stretch the icon back out. The card body still flows
however many lines it needs.

Closes #344.
This commit is contained in:
iris 2026-05-23 12:12:49 +02:00
parent 47d2f766c9
commit a2ed35cd19
1 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -82,17 +82,21 @@ a:hover {
/* Live cards get the icon-left / body-right split; tombstone rows keep /* Live cards get the icon-left / body-right split; tombstone rows keep
the plain stacked block layout. The icon is a background-image div 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 with no intrinsic size, so its load state can never reflow the row
— and it stretches to the body height, staying square (issue #177). */ (issue #177). It used to `align-self: stretch` to fill the body
height, but with state badges / rate-limit pills / etc. wrapping the
head row, the body grew taller and the square icon grew with it —
so two cards with different content showed different-sized icons
(issue #344). Fixed at 5em now; height follows from aspect-ratio. */
.container-row:not(.tombstone) { .container-row:not(.tombstone) {
display: flex; display: flex;
align-items: stretch; align-items: flex-start;
gap: 0.7em; gap: 0.7em;
} }
.container-row:not(.tombstone) > .container-icon { .container-row:not(.tombstone) > .container-icon {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
flex: none; flex: none;
align-self: stretch; width: 5em;
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 6px; border-radius: 6px;
background-color: rgba(17, 17, 27, 0.6); background-color: rgba(17, 17, 27, 0.6);