From e73143e2b7c92fd9af4518443ac32863327a189c Mon Sep 17 00:00:00 2001
From: Sucukdeluxe <259325684+Sucukdeluxe@users.noreply.github.com>
Date: Fri, 21 Aug 2026 00:21:33 +0200
Subject: [PATCH] fix: center the update action tooltip

Remove the duplicate native title tooltip and center the single custom update hint directly below the available-update action.
---
 renderer/app.js                | 1 -
 renderer/index.html            | 2 +-
 renderer/styles.css            | 7 ++++---
 tests/startup-renderer.test.js | 1 +
 tests/ui-smoke.js              | 4 ++--
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/renderer/app.js b/renderer/app.js
index 7356b5f..8132990 100644
--- a/renderer/app.js
+++ b/renderer/app.js
@@ -820,7 +820,6 @@ function _syncHeaderUpdateState() {
     button.tabIndex = available ? 0 : -1;
     button.setAttribute('aria-busy', _updateCheckBusy ? 'true' : 'false');
     button.setAttribute('aria-label', hint);
-    button.title = hint;
     button.dataset.tooltip = hint;
     _setHeaderUpdateLabel(_updateCheckBusy ? 'Prüfen…' : (available ? 'Update verfügbar' : 'Update'));
   }
diff --git a/renderer/index.html b/renderer/index.html
index 584830d..1e0708f 100644
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -55,7 +55,7 @@
     <div class="header-spacer" aria-hidden="true"></div>
     <div class="header-cluster header-utilities">
       <div class="header-update-slot" id="headerUpdateSlot" aria-hidden="true">
-        <button class="header-update-button" id="headerUpdateBtn" title="Nach Aktualisierungen suchen" aria-label="Nach Aktualisierungen suchen" data-tooltip="Nach Aktualisierungen suchen" tabindex="-1" disabled>
+        <button class="header-update-button" id="headerUpdateBtn" aria-label="Nach Aktualisierungen suchen" data-tooltip="Nach Aktualisierungen suchen" tabindex="-1" disabled>
           <svg class="header-action-icon" aria-hidden="true"><use href="#icon-download"></use></svg>
           <span class="header-update-label">Update</span>
         </button>
diff --git a/renderer/styles.css b/renderer/styles.css
index 66ad6aa..29dd459 100644
--- a/renderer/styles.css
+++ b/renderer/styles.css
@@ -2172,7 +2172,8 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   content: attr(data-tooltip);
   position: absolute;
   top: calc(100% + 10px);
-  right: 0;
+  left: 50%;
+  right: auto;
   width: max-content;
   max-width: min(240px, calc(100vw - 24px));
   padding: 8px 10px;
@@ -2188,7 +2189,7 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   white-space: normal;
   opacity: 0;
   pointer-events: none;
-  transform: translateY(-3px);
+  transform: translate(-50%, -3px);
   transition: opacity .14s, transform .14s;
   z-index: 80;
 }
@@ -2196,7 +2197,7 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
 .header-update-button:hover::after,
 .header-update-button:focus-visible::after {
   opacity: 1;
-  transform: translateY(0);
+  transform: translate(-50%, 0);
 }
 
 .header-update-button:hover {
diff --git a/tests/startup-renderer.test.js b/tests/startup-renderer.test.js
index 23212bb..040a477 100644
--- a/tests/startup-renderer.test.js
+++ b/tests/startup-renderer.test.js
@@ -160,6 +160,7 @@ test('header occupies its final geometry before asynchronous initialization', ()
   const asynchronousInitialization = appSource.lastIndexOf('\ninit().then(');
 
   assert.doesNotMatch(updateButton, /\shidden(?:\s|>)/u);
+  assert.doesNotMatch(updateButton, /\stitle=/u);
   assert.ok(updateSlotIndex >= 0 && updateSlotIndex < speedWidgetIndex);
   assert.match(css, /\.header-update-slot\s*\{[^}]*width:\s*0;[^}]*flex:\s*0 0 0;[^}]*overflow:\s*hidden;/su);
   assert.match(css, /\.header-update-slot\.is-visible\s*\{[^}]*width:\s*146px;[^}]*flex-basis:\s*146px;/su);
diff --git a/tests/ui-smoke.js b/tests/ui-smoke.js
index 76deb5f..278d6aa 100644
--- a/tests/ui-smoke.js
+++ b/tests/ui-smoke.js
@@ -2450,8 +2450,8 @@ setTimeout(async () => {
     const updateDialogChangelog = await wc.executeJavaScript('(() => { const title = document.querySelector(".update-release-notes-title"); const body = document.getElementById("updateReleaseNotesBody"); const titleRect = title?.getBoundingClientRect(); const bodyRect = body?.getBoundingClientRect(); return { hidden: document.getElementById("updateReleaseNotes")?.hidden, title: title?.textContent?.trim(), body: body?.textContent, gap: bodyRect && titleRect ? bodyRect.top - titleRect.bottom : null }; })()');
     check('Update dialog renders a compact normalized changelog', updateDialogChangelog.hidden === false && updateDialogChangelog.title === 'Changelog' && updateDialogChangelog.body === 'New in this version\\n\\nMenus and navigation\\n\\n• Added live language switching.\\n• Improved settings layout.' && updateDialogChangelog.gap <= 10);
 
-    const updateHeaderHint = await wc.executeJavaScript('(() => { const button = document.getElementById("headerUpdateBtn"); return [button?.textContent?.trim(), button?.getAttribute("aria-label"), button?.dataset.tooltip].join("|"); })()');
-    check('Available update gives the header action a matching hint', updateHeaderHint === 'Update verfügbar|Update v9.9.9 verfügbar. Klicken zum Installieren.|Update v9.9.9 verfügbar. Klicken zum Installieren.');
+    const updateHeaderHint = await wc.executeJavaScript('(() => { const button = document.getElementById("headerUpdateBtn"); const tooltip = getComputedStyle(button, "::after"); return [button?.textContent?.trim(), button?.getAttribute("aria-label"), button?.dataset.tooltip, button?.hasAttribute("title"), tooltip.left, tooltip.right].join("|"); })()');
+    check('Available update uses one centered custom tooltip below the header action', updateHeaderHint === 'Update verfügbar|Update v9.9.9 verfügbar. Klicken zum Installieren.|Update v9.9.9 verfügbar. Klicken zum Installieren.|false|73px|auto');
 
     const updateDialogDismissed = await wc.executeJavaScript('document.getElementById("dismissUpdateBtn")?.click(); (() => { const overlay = document.getElementById("updateBanner"); return [overlay?.style.display, overlay?.getAttribute("aria-hidden"), document.activeElement?.id, document.querySelector(".app-header")?.inert, document.querySelector(".view.active")?.inert].join("|"); })()');
     check('Update dialog closes and restores focus and background', updateDialogDismissed === 'none|true|headerUpdateBtn|false|false');