From 3865a0fe3391f4fec9bc876a584f531161469285 Mon Sep 17 00:00:00 2001
From: Administrator <admin@24-music.de>
Date: Tue, 28 Apr 2026 05:39:14 +0200
Subject: [PATCH] ux(css): scope queue-row background transition to :hover only
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The .queue-row rule had transition: background 0.15s applied
unconditionally. Every status flip (queued → getting-server →
uploading → done) on every visible row therefore animated for 150 ms,
and with 30+ rows changing state in close succession the compositor
ran overlapping tweens that ate paint time during heavy upload bursts.

Move the transition into the :hover rule. Hover-enter and hover-leave
keep their smooth fade — that's where transitions actually help the
user. Status changes now snap to the new background colour instantly,
which is what the queue table really wants: it conveys progress, not
animation.

No JS change. 97/97 tests still green.
---
 renderer/styles.css | 8 ++++++--
 tasks/todo.md       | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/renderer/styles.css b/renderer/styles.css
index bcf37d5..503ba5b 100644
--- a/renderer/styles.css
+++ b/renderer/styles.css
@@ -305,8 +305,12 @@ body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-sel
 .virtual-spacer td { padding: 0 !important; border: none !important; }
 
 /* Queue Row States */
-.queue-row { transition: background 0.15s; cursor: pointer; }
-.queue-row:hover { background: rgba(255, 255, 255, 0.04); }
+/* Transition only on hover-enter/leave so that status flips during a busy
+   upload (queued→getting-server→uploading→done) don't trigger compositor
+   repaints with 150ms tweens for every visible row. With 30+ rows flipping
+   simultaneously the overlapping transitions cost real GPU time. */
+.queue-row { cursor: pointer; }
+.queue-row:hover { background: rgba(255, 255, 255, 0.04); transition: background 0.15s; }
 .queue-row.selected { background: rgba(102, 126, 234, 0.12) !important; }
 
 .queue-row.status-uploading { background: rgba(102, 126, 234, 0.08); }
diff --git a/tasks/todo.md b/tasks/todo.md
index c320d71..db8bc29 100644
--- a/tasks/todo.md
+++ b/tasks/todo.md
@@ -7,6 +7,7 @@
 - ✅ 3.3.3 — `_jobLogCollector` Cap auf 1000 tracked jobs (FIFO-eviction beim Überschreiten)
 - ✅ 3.3.4 — `applyQueueSelectionClasses` + `applyRecentSelectionClasses` nutzen `getElementsByClassName` (live HTMLCollection statt querySelectorAll re-query bei jedem Klick)
 - ✅ 3.3.5 — Log-Rotation extrahiert nach `lib/log-rotation.js` + 10 neue Unit-Tests (cap, shift, eviction, idempotency, maxBackups=1, invalid input, no-extension)
+- ✅ 3.3.6 — CSS `.queue-row` transition nur noch auf `:hover` (kein 150ms compositor-tween bei status-flips)
 
 ## Open items (priorisiert)
 
@@ -15,7 +16,6 @@
 - [ ] sortQueueJobs dynamic-throttle (3.3.0) — modul-state-abhängig im renderer; deferred
 
 ### UX-Politur
-- [ ] **CSS `.queue-row` transition** auf `:hover` scopen (aktuell auf jedem row → unnötiger Repaint bei Status-Flip).
 - [ ] Module-level Sets `_sessionTrackedJobs`/`_sessionDoneJobs`/`_completedUploadKeys` werden nie geleert — minor memory growth.
 
 ## Loop-Notes