From 5f1ec9ed7eda70aab565a80562a2c173979d0866 Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Mon, 22 Jun 2026 22:28:07 -0700
Subject: [PATCH] #903: fix mirrored-card layout break from export status div

The live export status was a separate flex child with flex-basis:100%, which became a
greedy item in the card's flex row and squished the info column to min-content (text
wrapping vertically). Inject the status into the card's existing .card-meta line instead
(same approach as the pipeline phase indicator) so it sits inline and leaves the row intact.
Removes the offending div + CSS.
---
 webui/static/stats-automations.js | 20 ++++++++++++++------
 webui/static/style.css            | 10 ++++------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/webui/static/stats-automations.js b/webui/static/stats-automations.js
index 63d1c760..922e6e0d 100644
--- a/webui/static/stats-automations.js
+++ b/webui/static/stats-automations.js
@@ -603,7 +603,6 @@ function renderMirroredCard(p, container) {
         <button class="mirrored-card-link" onclick="event.stopPropagation(); editMirroredSourceRef(${p.id}, '${_escJs(p.name)}', '${_escJs(p.source)}', '${_escJs(sourceRef)}')" title="Edit original playlist link">🔗</button>
         <button class="mirrored-card-export" onclick="event.stopPropagation(); exportMirroredPlaylist(${p.id}, '${_escJs(p.display_name || p.name)}')" title="Export to ListenBrainz / JSPF">📤</button>
         <button class="mirrored-card-delete" onclick="event.stopPropagation(); deleteMirroredPlaylist(${p.id}, '${_escJs(p.name)}')" title="Delete mirror">✕</button>
-        <div class="mirrored-card-export-status" id="export-status-${p.id}" style="display:none;"></div>
     `;
     card.addEventListener('click', () => {
         const st = youtubePlaylistStates[hash];
@@ -734,11 +733,20 @@ async function _pollPlaylistExport(jobId, playlistId, mode, name) {
 }
 
 function _setExportStatus(playlistId, html, autoHideMs) {
-    const el = document.getElementById(`export-status-${playlistId}`);
-    if (!el) return;
-    el.innerHTML = html;
-    el.style.display = '';
-    if (autoHideMs) setTimeout(() => { if (el) el.style.display = 'none'; }, autoHideMs);
+    // Inject into the card's existing .card-meta line (same approach as the pipeline phase
+    // indicator) so the status sits inline and never disrupts the card's flex row.
+    const card = document.getElementById(`mirrored-card-${playlistId}`);
+    if (!card) return;
+    const meta = card.querySelector('.card-meta');
+    if (!meta) return;
+    let span = meta.querySelector('.export-status-span');
+    if (!span) {
+        span = document.createElement('span');
+        span.className = 'export-status-span';
+        meta.appendChild(span);
+    }
+    span.innerHTML = html;
+    if (autoHideMs) setTimeout(() => { if (span && span.parentNode) span.remove(); }, autoHideMs);
 }
 
 function updateMirroredCardPhase(urlHash, phase) {
diff --git a/webui/static/style.css b/webui/static/style.css
index 20483d19..47a0e66c 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -14576,12 +14576,10 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     transform: scale(1.1);
 }
 
-/* Live export status line on the card (Matching N/M, Synced, etc.) */
-.mirrored-card-export-status {
-    flex-basis: 100%;
-    font-size: 11.5px;
-    margin-top: 6px;
-    padding-left: 2px;
+/* Live export status, injected inline into the card's .card-meta line. */
+.export-status-span {
+    font-size: inherit;
+    white-space: nowrap;
 }
 
 .mirrored-card-delete:hover {