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 @@ ...@@ -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) { 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...'; progressElement.textContent = jobUpdate.result.status || 'Processing...';
} else { } else {
// Remove progress element if job is no longer processing progressElement.textContent = ''; // Clear when not processing
const progressElement = jobRow.querySelector('.job-progress');
if (progressElement) {
progressElement.remove();
} }
} }
} }
...@@ -480,9 +470,7 @@ ...@@ -480,9 +470,7 @@
{{ job.status.title() }} {{ job.status.title() }}
</span> </span>
<div class="job-tokens" style="font-size: 0.8rem; color: #6b7280;">Tokens: {{ job.used_tokens or 0 }}</div> <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;"> <div class="job-progress" style="font-size: 0.8rem; color: #6b7280;"></div>
<!-- Progress will be populated by JavaScript -->
</div>
<div class="job-actions"> <div class="job-actions">
<!-- Actions will be populated by JavaScript --> <!-- Actions will be populated by JavaScript -->
</div> </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