diff --git a/web/css/queue_style.css b/web/css/queue_style.css index f07c394..f87f3b7 100644 --- a/web/css/queue_style.css +++ b/web/css/queue_style.css @@ -168,4 +168,6 @@ .pqueue-table-wrapper{padding-bottom:.25rem} .pqueue-col--submitted .pqueue-cell__primary,.pqueue-col--estimate .pqueue-cell__primary{font-weight:500} .pqueue-muted{color:var(--subtle-text,#94a3b8)} +/* Stabilize running card height to avoid tiny layout shifts */ +.pqueue-item--running{min-height:56px} \ No newline at end of file diff --git a/web/pqueue.js b/web/pqueue.js index d4bc04e..a0bd030 100644 --- a/web/pqueue.js +++ b/web/pqueue.js @@ -690,8 +690,9 @@ } const card = UI.card("Currently running", { icon: "ti ti-activity-heartbeat", - subtitle: state.metrics.runningCount ? `${state.metrics.runningCount} active` : null, + subtitle: state.metrics.runningCount ? `${state.metrics.runningCount} active` : "", content: rows, + classes: "pqueue-card--running", }); state.dom.runningCard = card; return card; @@ -1027,7 +1028,8 @@ if (!card) return; const body = card.querySelector('.pqueue-card__body'); if (!body) return; - const beforeHeight = Math.max(0, body.offsetHeight || 0); + const rect = body.getBoundingClientRect(); + const beforeHeight = Math.max(0, (rect && rect.height) || 0); body.innerHTML = ''; if (!state.queue_running.length) { // Preserve current height to avoid layout shift