Make job progress column always visible for consistent layout

- Add empty progress div to template for every job row
- Update JavaScript to populate/clear text instead of creating/removing elements
- Prevents layout shift when jobs start/stop processing
- Maintains consistent column positioning
parent 399e8db3
......@@ -120,23 +120,13 @@
}
}
// Add progress info for processing jobs (separate from worker assignment details)
// Update progress info for processing jobs (element always exists for consistent layout)
const progressElement = jobRow.querySelector('.job-progress');
if (progressElement) {
if (jobUpdate.status === 'processing' && jobUpdate.result) {
let progressElement = jobRow.querySelector('.job-progress');
if (!progressElement) {
progressElement = document.createElement('div');
progressElement.className = 'job-progress';
progressElement.style.fontSize = '0.8rem';
progressElement.style.color = '#6b7280';
progressElement.style.gridColumn = '9'; // Progress column (before actions)
jobRow.appendChild(progressElement);
}
progressElement.textContent = jobUpdate.result.status || 'Processing...';
} else {
// Remove progress element if job is no longer processing
const progressElement = jobRow.querySelector('.job-progress');
if (progressElement) {
progressElement.remove();
progressElement.textContent = ''; // Clear when not processing
}
}
}
......@@ -480,9 +470,7 @@
{{ job.status.title() }}
</span>
<div class="job-tokens" style="font-size: 0.8rem; color: #6b7280;">Tokens: {{ job.used_tokens or 0 }}</div>
<div class="job-progress" style="font-size: 0.8rem; color: #6b7280;">
<!-- Progress will be populated by JavaScript -->
</div>
<div class="job-progress" style="font-size: 0.8rem; color: #6b7280;"></div>
<div class="job-actions">
<!-- Actions will be populated by JavaScript -->
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment