From b3ebf1418abda5bb30e2707486b9b2f42840ff70 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Mon, 16 Mar 2026 12:10:55 -0700
Subject: [PATCH] fix: add background to running job rows (#9748)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Add the missing surface fill for running job rows in the queue progress
panel using the existing semantic background token.

## Changes

- Apply `bg-secondary-background` to running rows in `JobAssetsList`
while preserving the existing hover state.
- Reuse the existing `secondary-background` /
`secondary-background-hover` tokens instead of introducing new
single-use job-card tokens.

## Validation

- `pnpm test:unit -- src/components/queue/job/JobAssetsList.test.ts`
- `pnpm typecheck`
- `pnpm lint`
- `pnpm format:check`


https://github.com/user-attachments/assets/a926ede6-99e8-4f5a-b164-f9cf3cd124a7

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9748-fix-add-background-to-running-job-rows-3206d73d365081519559dfe3a9cf2037)
by [Unito](https://www.unito.io)
---
 src/components/queue/job/JobAssetsList.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/queue/job/JobAssetsList.vue b/src/components/queue/job/JobAssetsList.vue
index 16ea4e23e3..c0d8f6c150 100644
--- a/src/components/queue/job/JobAssetsList.vue
+++ b/src/components/queue/job/JobAssetsList.vue
@@ -16,7 +16,12 @@
         @mouseleave="onJobLeave(job.id)"
       >
         <AssetsListItem
-          class="w-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover"
+          :class="
+            cn(
+              'w-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover',
+              job.state === 'running' && 'bg-secondary-background'
+            )
+          "
           :preview-url="getJobPreviewUrl(job)"
           :is-video-preview="isVideoPreviewJob(job)"
           :preview-alt="job.title"
@@ -99,6 +104,7 @@ import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
+import { cn } from '@/utils/tailwindUtil'
 import { iconForJobState } from '@/utils/queueDisplay'
 import { isActiveJobState } from '@/utils/queueUtil'