From d0ee9c73b3453e58d56a62ff88bbd2b97726f4da Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Tue, 21 Apr 2026 21:12:06 -0700
Subject: [PATCH] Reveal download cancel button on hover instead of always
 showing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cancel button on active download items was always visible, cluttering
the card. Now hidden by default and fades in when you hover the card
(or focus anything inside it, for keyboard a11y).

- opacity + pointer-events approach so layout doesn't jump on reveal
- 4px slide-in on reveal for a subtle entrance
- Touch devices (hover: none) keep the button always visible — no hover
  means no way to discover it otherwise
---
 webui/static/style.css | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/webui/static/style.css b/webui/static/style.css
index 049dcf50..d77793d7 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -7022,11 +7022,32 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     font-weight: 600;
     padding: 12px 12px !important;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: opacity 0.15s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
     align-self: flex-start;
     width: fit-content !important;
     height: fit-content !important;
+    /* Reveal on hover only — keeps the card clean until the user actually
+       wants to act. Space is reserved (opacity + pointer-events, not display)
+       so the layout doesn't jump when the button shows. */
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(4px);
+}
 
+.download-item:hover .download-item__cancel-btn,
+.download-item:focus-within .download-item__cancel-btn {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateX(0);
+}
+
+/* Touch devices have no hover — keep cancel visible so it's reachable. */
+@media (hover: none) {
+    .download-item__cancel-btn {
+        opacity: 1;
+        pointer-events: auto;
+        transform: none;
+    }
 }
 
 .download-item__cancel-btn:hover {