console: the queue card fills the column beside Pipeline by stage

The two cards stretch to one height and the queue rows spread to fill it,
so the shorter card no longer ends in empty canvas.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Yashas 2026-09-10 11:12:33 +05:30
parent 9e093757d8
commit 97c792a2fc

View File

@ -127,8 +127,13 @@
.appr:not(.is-live) .appr__n, .appr:not(.is-live) .appr__go { color: var(--zk-grey); } .appr:not(.is-live) .appr__n, .appr:not(.is-live) .appr__go { color: var(--zk-grey); }
/* ── Two columns: queue + distribution ──────────────────────────────────── */ /* ── Two columns: queue + distribution ──────────────────────────────────── */
.cols { display: grid; grid-template-columns: 1fr 380px; gap: 18px; margin-bottom: 22px; align-items: start; } .cols { display: grid; grid-template-columns: 1fr 380px; gap: 18px; margin-bottom: 22px; align-items: stretch; }
.queue { padding: 4px 0 6px; } /* The two cards share a height; the queue's rows spread to fill it so the
shorter card never ends in a block of empty canvas. */
.cols > .card { display: flex; flex-direction: column; }
.queue { flex: 1; display: flex; flex-direction: column; }
.queue__row { flex: 1; }
.queue { padding: 0 0 6px; }
.queue__row { .queue__row {
display: grid; grid-template-columns: 52px 1fr auto auto; gap: 14px; align-items: center; display: grid; grid-template-columns: 52px 1fr auto auto; gap: 14px; align-items: center;
padding: 14px 20px; border-top: 1px solid var(--zk-line-soft); text-decoration: none; color: inherit; padding: 14px 20px; border-top: 1px solid var(--zk-line-soft); text-decoration: none; color: inherit;