From 010b148141cfdec96af721097688cc8c9a06680d Mon Sep 17 00:00:00 2001
From: Sucukdeluxe <259325684+Sucukdeluxe@users.noreply.github.com>
Date: Fri, 21 Aug 2026 01:01:17 +0200
Subject: [PATCH] fix: keep the queue filter layout stable

Reserve the reset action permanently inside the filter group, disabling and dimming it when no filter is active so typing never changes the toolbar width.
---
 renderer/app.js                | 1 -
 renderer/index.html            | 2 +-
 renderer/styles.css            | 5 +++--
 tests/startup-renderer.test.js | 2 +-
 tests/ui-smoke.js              | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/renderer/app.js b/renderer/app.js
index 8d32f90..31bb68b 100644
--- a/renderer/app.js
+++ b/renderer/app.js
@@ -3940,7 +3940,6 @@ function syncQueueFilterResetAction() {
   const button = document.getElementById('queueFilterResetBtn');
   if (!button) return;
   const active = _hasActiveQueueFilters();
-  button.hidden = !active;
   button.disabled = !active;
 }
 
diff --git a/renderer/index.html b/renderer/index.html
index 8bc368e..da43530 100644
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -295,7 +295,7 @@
             <select class="hs-input" id="queueStatusFilter" aria-label="Nach Status filtern" style="width:auto;min-width:150px">
               <option value="">Alle Status</option><option value="error">Nur Fehler</option><option value="active">Aktiv</option><option value="waiting">Wartend</option><option value="done">Erfolgreich</option>
             </select>
-            <button class="btn btn-xs btn-secondary queue-filter-reset" id="queueFilterResetBtn" hidden>Filter zurücksetzen</button>
+            <button class="btn btn-xs btn-secondary queue-filter-reset" id="queueFilterResetBtn" disabled>Filter zurücksetzen</button>
           </div>
         </div>
 
diff --git a/renderer/styles.css b/renderer/styles.css
index 6c359f0..27e5bbe 100644
--- a/renderer/styles.css
+++ b/renderer/styles.css
@@ -405,8 +405,9 @@ body {
   margin-left: 2px;
   white-space: nowrap;
 }
-.queue-filter-reset[hidden] {
-  display: none;
+.queue-filter-reset:disabled {
+  opacity: .45;
+  cursor: default;
 }
 .queue-filter-bar {
   min-width: 0;
diff --git a/tests/startup-renderer.test.js b/tests/startup-renderer.test.js
index d752f6d..2b1b637 100644
--- a/tests/startup-renderer.test.js
+++ b/tests/startup-renderer.test.js
@@ -177,7 +177,7 @@ test('header occupies its final geometry before asynchronous initialization', ()
   assert.match(css, /\.update-dialog\s*\{[^}]*width:\s*min\(576px,\s*100%\);/su);
   assert.match(css, /\.update-release-notes\s*\{[^}]*height:\s*min\(264px,\s*48vh\);/su);
   assert.match(html, /class="update-progress-footer"[\s\S]*id="updateProgressDetails"[\s\S]*id="updateProgressSize"[\s\S]*id="updateProgressSpeed"[\s\S]*id="updateProgressEta"[\s\S]*id="updateProgressText"/u);
-  assert.match(html, /id="queueFilterResetBtn"[^>]*hidden[^>]*>Filter zurücksetzen</u);
+  assert.match(html, /id="queueFilterResetBtn"[^>]*disabled[^>]*>Filter zurücksetzen</u);
   assert.doesNotMatch(html, /<\/div>\s*<div class="queue-filter-bar"/u);
   assert.match(css, /\.queue-filter-bar\s*\{[^}]*display:\s*flex;[^}]*margin-left:\s*auto;[^}]*border:\s*1px solid var\(--border\);[^}]*border-radius:\s*7px;/su);
   assert.match(css, /#updateProgressDetails\s*\{[^}]*display:\s*grid;[^}]*grid-template-columns:\s*19ch 2ch 11ch 2ch 10ch;[^}]*column-gap:\s*0;[^}]*font-variant-numeric:\s*tabular-nums;/su);
diff --git a/tests/ui-smoke.js b/tests/ui-smoke.js
index 92ecf6d..350ad99 100644
--- a/tests/ui-smoke.js
+++ b/tests/ui-smoke.js
@@ -754,7 +754,7 @@ setTimeout(async () => {
       renderQueueTable();
       return { before, after };
     })()\`);
-    check('Queue filter reset clears sidebar, search, host, and status together', queueFilterReset.before.hidden === false && queueFilterReset.before.disabled === false && queueFilterReset.after.hidden === true && queueFilterReset.after.disabled === true && queueFilterReset.after.sidebar === 'all' && queueFilterReset.after.search === '' && queueFilterReset.after.hoster === '' && queueFilterReset.after.status === '' && queueFilterReset.after.allPressed === 'true' && queueFilterReset.after.visible === 'filter-a|filter-b');
+    check('Queue filter reset clears every filter without shifting its stable action', queueFilterReset.before.hidden === false && queueFilterReset.before.disabled === false && queueFilterReset.after.hidden === false && queueFilterReset.after.disabled === true && queueFilterReset.after.sidebar === 'all' && queueFilterReset.after.search === '' && queueFilterReset.after.hoster === '' && queueFilterReset.after.status === '' && queueFilterReset.after.allPressed === 'true' && queueFilterReset.after.visible === 'filter-a|filter-b');
 
     const queueSelectionAnchor = await wc.executeJavaScript(\`(() => {
       queueJobs = ['a', 'b', 'c', 'd'].map(id => ({ id: 'anchor-' + id, file: 'C:/ui/anchor-' + id + '.bin', fileName: 'anchor-' + id + '.bin', hoster: 'byse.sx', status: 'queued', bytesUploaded: 0, bytesTotal: 100, progress: 0 }));