ui: move runner duration next to name, remove per-runner spinner

Author: meintechblog

static/app.js

@@ -1137,14 +1137,13 @@ function renderRunners() {
     div.dataset.runnerId = r.id;
     div.innerHTML = `
       <div class="runnerHead">
-        <div class="runnerIdentity">
+          <div class="runnerIdentity">
           <div class="runnerTitleRow">
             <span class="toggle" data-toggle="${r.id}">${r._collapsed ? "+" : "-"}</span>
             <input data-name="${r.id}" value="${escapeHtml(r.name)}" placeholder="Runner Name" />
+            <span class="pill runnerElapsed ${showElapsed ? "" : "hidden"}" data-runner-elapsed="${r.id}">${showElapsed ? `⏱ ${escapeHtml(elapsedText)}` : ""}</span>
           </div>
           <div class="runnerState">
-            <div class="spinner ${isActive ? "" : "hidden"}" data-spinner="${r.id}"></div>
-            <span class="pill runnerElapsed ${showElapsed ? "" : "hidden"}" data-runner-elapsed="${r.id}">${showElapsed ? `⏱ ${escapeHtml(elapsedText)}` : ""}</span>
             <span class="small runnerStateText">${escapeHtml(runnerStateText)}</span>
           </div>
         </div>

static/style.css

@@ -156,7 +156,7 @@ label span { display: block; font-size: 12px; opacity: 0.85; margin-bottom: 6px;
   background: rgba(8, 12, 22, 0.55);
 }
 .runnerIdentity { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
-.runnerTitleRow { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.runnerTitleRow { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
 .runnerTitleRow input {
   width: min(380px, 100%);
   font-weight: 600;