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 @@ ...@@ -8,7 +8,7 @@
.jobs-table { background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden; } .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 { padding: 2rem; border-bottom: 1px solid #e5e7eb; }
.table-header h2 { margin: 0; color: #1e293b; } .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-row:last-child { border-bottom: none; }
.job-type { color: #374151; } .job-type { color: #374151; }
.job-row > div { padding: 0.25rem 0; } .job-row > div { padding: 0.25rem 0; }
...@@ -128,8 +128,7 @@ ...@@ -128,8 +128,7 @@
progressElement.className = 'job-progress'; progressElement.className = 'job-progress';
progressElement.style.fontSize = '0.8rem'; progressElement.style.fontSize = '0.8rem';
progressElement.style.color = '#6b7280'; progressElement.style.color = '#6b7280';
progressElement.style.gridColumn = '10'; // Dedicated progress column progressElement.style.gridColumn = '9'; // Progress column (before actions)
progressElement.style.marginTop = '0.25rem';
jobRow.appendChild(progressElement); jobRow.appendChild(progressElement);
} }
progressElement.textContent = jobUpdate.result.status || 'Processing...'; progressElement.textContent = jobUpdate.result.status || 'Processing...';
...@@ -481,6 +480,9 @@ ...@@ -481,6 +480,9 @@
{{ 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;">
<!-- 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