cleanup: .queue-output-row + .queue-output-label CSS — 2 inline styles gone

The queue-item detail panel's output-files row (rendered after a job completes — Open file / Show in folder / View chat / View events buttons + a tiny file-label span) had two inline-styled elements:

- The container div with display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; align-items:center
- The span with color:var(--text-secondary,#888); font-size:11px; word-break:break-all

The span's inline fallback color (#888 after the comma) was a leftover defensive value from before --text-secondary was guaranteed to be defined globally; it's never actually needed today.

Extracted to .queue-output-row + .queue-output-label classes. Class definitions live next to the .context-menu* family they belong to (other queue-detail-panel internals).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 09:13:00 +02:00
parent 84abfb7cf7
commit 26d737b3fc
2 changed files with 20 additions and 2 deletions

View File

@ -45,9 +45,9 @@ function renderQueueItemFileActions(item: QueueItem): string {
: `${escapeHtml(UI_TEXT.queue.outputFilesLabel.replace('{count}', String(item.outputFiles.length)))}`;
return `
<div class="queue-output-row" style="display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; align-items:center;">
<div class="queue-output-row">
${buttons.join('')}
<span style="color: var(--text-secondary,#888); font-size:11px; word-break:break-all;">${fileLabel}</span>
<span class="queue-output-label">${fileLabel}</span>
</div>
`;
}

View File

@ -4451,3 +4451,21 @@ input[type="number"]::-webkit-outer-spin-button {
margin: 4px 6px;
background: var(--border-soft);
}
/* Output-row appended to the queue-item detail panel when a job
completed. Lists the file actions (Open file / Show in folder /
View chat / View events) followed by a tiny secondary-colour file
label. */
.queue-output-row {
display: flex;
gap: 6px;
margin-top: 6px;
flex-wrap: wrap;
align-items: center;
}
.queue-output-label {
color: var(--text-secondary);
font-size: 11px;
word-break: break-all;
}