Administrator/Multi-Hoster-Upload
1
0
Fork 0
Code Issues Pull Requests Actions 32 Packages Projects Releases 52 Wiki Activity

style: enlarge the update dialog

Browse Source 
Increase the responsive update dialog width and changelog viewport by twenty percent so release notes remain readable with less scrolling.
This commit is contained in:
Sucukdeluxe
2026-08-21 00:23:13 +02:00
parent e73143e2b7
commit a9a17bf08f
3 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
renderer/styles.css
+2 -2
View File
@@ -2381,7 +2381,7 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
} }
.update-dialog { .update-dialog {
width: min(480px, 100%); width: min(576px, 100%);
display: grid; display: grid;
grid-template-columns: 48px minmax(0, 1fr); grid-template-columns: 48px minmax(0, 1fr);
gap: 0 16px; gap: 0 16px;
@@ -2468,7 +2468,7 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
.update-release-notes { .update-release-notes {
grid-column: 1 / -1; grid-column: 1 / -1;
max-height: 150px; max-height: 180px;
margin-top: 18px; margin-top: 18px;
padding: 12px; padding: 12px;
overflow: auto; overflow: auto;
tests/startup-renderer.test.js
+2
View File
@@ -174,4 +174,6 @@ test('header occupies its final geometry before asynchronous initialization', ()
assert.match(css, /\.upload-speed-baseline\s*\{[^}]*background:\s*var\(--success\);/su); assert.match(css, /\.upload-speed-baseline\s*\{[^}]*background:\s*var\(--success\);/su);
assert.match(css, /\.header-update-button\.update-available\s*\{[^}]*background:\s*var\(--success\);[^}]*color:\s*#000;/su); assert.match(css, /\.header-update-button\.update-available\s*\{[^}]*background:\s*var\(--success\);[^}]*color:\s*#000;/su);
assert.match(css, /\.header-update-button\.update-available:hover\s*\{[^}]*background:\s*var\(--success-end\);[^}]*color:\s*#000;/su); assert.match(css, /\.header-update-button\.update-available:hover\s*\{[^}]*background:\s*var\(--success-end\);[^}]*color:\s*#000;/su);
assert.match(css, /\.update-dialog\s*\{[^}]*width:\s*min\(576px,\s*100%\);/su);
assert.match(css, /\.update-release-notes\s*\{[^}]*max-height:\s*180px;/su);
}); });
tests/ui-smoke.js
+2
View File
@@ -2449,6 +2449,8 @@ setTimeout(async () => {
check('Update dialog exposes a red close action', updateCloseColor === 'rgb(255, 133, 140)'); check('Update dialog exposes a red close action', updateCloseColor === 'rgb(255, 133, 140)');
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 }; })()'); 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); 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 updateDialogSize = await wc.executeJavaScript('(() => ({ width: document.querySelector(".update-dialog")?.getBoundingClientRect().width, notesMaxHeight: getComputedStyle(document.getElementById("updateReleaseNotes")).maxHeight }))()');
check('Update dialog and changelog provide twenty percent more room', updateDialogSize.width === 576 && updateDialogSize.notesMaxHeight === '180px');
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("|"); })()'); 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'); 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');