From a2ed35cd1965f819f1a64d66a29e4a21e3b89d0b Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive>
Date: Sat, 23 May 2026 12:12:49 +0200
Subject: [PATCH] dashboard: pin agent icon at a fixed size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`.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.
---
 hive-c0re/assets/dashboard.css | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/hive-c0re/assets/dashboard.css b/hive-c0re/assets/dashboard.css
index 5f0e8c2..568729d 100644
--- a/hive-c0re/assets/dashboard.css
+++ b/hive-c0re/assets/dashboard.css
@@ -82,17 +82,21 @@ a:hover {
 /* 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). */
+   (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) {
   display: flex;
-  align-items: stretch;
+  align-items: flex-start;
   gap: 0.7em;
 }
 .container-row:not(.tombstone) > .container-icon {
   position: relative;
   overflow: hidden;
   flex: none;
-  align-self: stretch;
+  width: 5em;
   aspect-ratio: 1;
   border-radius: 6px;
   background-color: rgba(17, 17, 27, 0.6);