fix: add background to running job rows (#9748)

## 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)
This commit is contained in:
Benjamin Lu
2026-03-16 12:10:55 -07:00
committed by GitHub
parent fb756b41c8
commit b3ebf1418a

View File

@@ -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'