Fine-tune jobs page grid spacing

- Reduce grid gap to 0.2rem for tighter column spacing
- Adjust row padding to 0.5rem 0.75rem for more compact layout
- Better space utilization while maintaining readability
parent d1b3cfe1
......@@ -8,7 +8,7 @@
.jobs-table { background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden; }
.table-header { padding: 2rem; border-bottom: 1px solid #e5e7eb; }
.table-header h2 { margin: 0; color: #1e293b; }
.job-row { display: grid; grid-template-columns: 0.3fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 0.75rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid #e5e7eb; align-items: center; }
.job-row { display: grid; grid-template-columns: 0.3fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 0.2rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid #e5e7eb; align-items: center; }
.job-row:last-child { border-bottom: none; }
.job-type { color: #374151; }
.job-row > div { padding: 0.25rem 0; }
......@@ -128,8 +128,7 @@
progressElement.className = 'job-progress';
progressElement.style.fontSize = '0.8rem';
progressElement.style.color = '#6b7280';
progressElement.style.gridColumn = '10'; // Dedicated progress column
progressElement.style.marginTop = '0.25rem';
progressElement.style.gridColumn = '9'; // Progress column (before actions)
jobRow.appendChild(progressElement);
}
progressElement.textContent = jobUpdate.result.status || 'Processing...';
......@@ -481,6 +480,9 @@
{{ 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-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