UI Audit: 487 inline styles on Jobs screen — extract to CSS #148

New issue

Closed

opened 2026-05-28 19:30:06 -04:00 by zgaetano · 0 comments

zgaetano commented

2026-05-28 19:30:06 -04:00

Owner

Fixed in 342b56a.

screens-jobs.jsx inline style={{...}} count: 19 → 1. The remaining one is the dynamic width: job.progress + '%' on the progress bar, which has to be inline.

Since the rendered DOM count was 487 because of per-row repetition (~54 rows × 9 inline styles), the actual rendered inline-style budget on the Jobs screen now drops to roughly the bar widths only.

New CSS utilities live in styles-screens.css:

.job-row-kind, .job-row-kind-icon, .job-row-kind-name
.job-row-asset, .job-row-node, .job-row-time, .job-row-actions
.job-row-status-done, .job-row-status-queued, .job-row-status-failed, .job-row-status-failed-msg
.job-row-progress-pct, .job-row-cancel
.stat-card .delta.delta-warn, .stat-card .delta.delta-tiny
.jobs-tabs, .jobs-panel, .jobs-empty

Other screens (Containers, Settings, Cluster, Tokens, Recorders) still have many inline styles. Cross-cutting cleanup deferred — Jobs was the worst offender by an order of magnitude.

Fixed in 342b56a. `screens-jobs.jsx` inline `style={{...}}` count: **19 → 1**. The remaining one is the dynamic `width: job.progress + '%'` on the progress bar, which has to be inline. Since the rendered DOM count was 487 because of per-row repetition (~54 rows × 9 inline styles), the actual rendered inline-style budget on the Jobs screen now drops to roughly the bar widths only. New CSS utilities live in `styles-screens.css`: - `.job-row-kind`, `.job-row-kind-icon`, `.job-row-kind-name` - `.job-row-asset`, `.job-row-node`, `.job-row-time`, `.job-row-actions` - `.job-row-status-done`, `.job-row-status-queued`, `.job-row-status-failed`, `.job-row-status-failed-msg` - `.job-row-progress-pct`, `.job-row-cancel` - `.stat-card .delta.delta-warn`, `.stat-card .delta.delta-tiny` - `.jobs-tabs`, `.jobs-panel`, `.jobs-empty` Other screens (Containers, Settings, Cluster, Tokens, Recorders) still have many inline styles. Cross-cutting cleanup deferred — Jobs was the worst offender by an order of magnitude.