danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

#903: fix mirrored-card layout break from export status div

Browse source 
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.
This commit is contained in:
BoulderBadgeDad 2026-06-22 22:28:07 -07:00
parent c06ef6bb34
commit 5f1ec9ed7e
2 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
webui/static/stats-automations.js
View file

@ -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) {

10
webui/static/style.css
View file

@ -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 {