fix: stabilize update telemetry layout

Render size, speed, and ETA in dedicated fixed-width columns with tabular numerals so rapidly changing values no longer shift neighboring metrics horizontally.

renderer/app.js

@@ -7714,16 +7714,23 @@ function _setUpdateProgress(percent, text, state = 'ready') {
 function _setUpdateProgressDetails(progress) {
   const details = document.getElementById('updateProgressDetails');
   if (!details) return;
+  const size = document.getElementById('updateProgressSize');
+  const speed = document.getElementById('updateProgressSpeed');
+  const eta = document.getElementById('updateProgressEta');
   const downloaded = Math.max(0, Number(progress?.bytesDownloaded) || 0);
   const total = Math.max(0, Number(progress?.bytesTotal) || 0);
   if (total <= 0) {
-    details.textContent = '';
+    if (size) size.textContent = '';
+    if (speed) speed.textContent = '';
+    if (eta) eta.textContent = '';
     details.hidden = true;
     return;
   }
   const bytesPerSecond = Math.max(0, Number(progress?.bytesPerSecond) || 0);
   const etaSeconds = Number.isFinite(Number(progress?.etaSeconds)) ? Math.max(0, Number(progress.etaSeconds)) : 0;
-  details.textContent = `${formatSize(downloaded)} / ${formatSize(total)} · ${formatSize(bytesPerSecond)}/s · ETA ${formatTime(etaSeconds)}`;
+  if (size) size.textContent = `${formatSize(downloaded)} / ${formatSize(total)}`;
+  if (speed) speed.textContent = `${formatSize(bytesPerSecond)}/s`;
+  if (eta) eta.textContent = `ETA ${formatTime(etaSeconds)}`;
   details.hidden = false;
 }
 

renderer/index.html

@@ -162,7 +162,13 @@
       <div class="update-progress" aria-live="polite">
         <div class="update-progress-track"><span id="updateProgressBar" role="progressbar" aria-label="Update-Fortschritt" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0%"></span></div>
         <div class="update-progress-footer">
-          <span id="updateProgressDetails" hidden></span>
+          <span id="updateProgressDetails" hidden>
+            <span id="updateProgressSize"></span>
+            <span class="update-progress-separator" aria-hidden="true">·</span>
+            <span id="updateProgressSpeed"></span>
+            <span class="update-progress-separator" aria-hidden="true">·</span>
+            <span id="updateProgressEta"></span>
+          </span>
           <span id="updateProgressText"></span>
         </div>
       </div>

renderer/styles.css

@@ -2520,19 +2520,32 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   display: flex;
   align-items: baseline;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 12px;
 }
 
 #updateProgressDetails {
   min-width: 0;
-  overflow: hidden;
+  display: grid;
+  grid-template-columns: 19ch auto 11ch auto 10ch;
+  align-items: baseline;
+  gap: 5px;
   color: var(--text-dim);
   font-size: 11px;
+  font-variant-numeric: tabular-nums;
   line-height: 1.35;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.update-progress-separator {
+  text-align: center;
+}
+
+#updateProgressSpeed,
+#updateProgressEta {
+  text-align: right;
+}
+
 #updateProgressText {
   min-width: 34px;
   max-width: 100%;

tests/startup-renderer.test.js

@@ -176,5 +176,6 @@ test('header occupies its final geometry before asynchronous initialization', ()
   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*\{[^}]*height:\s*min\(220px,\s*42vh\);/su);
-  assert.match(html, /class="update-progress-footer"[\s\S]*id="updateProgressDetails"[\s\S]*id="updateProgressText"/u);
+  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(css, /#updateProgressDetails\s*\{[^}]*display:\s*grid;[^}]*grid-template-columns:\s*19ch auto 11ch auto 10ch;[^}]*font-variant-numeric:\s*tabular-nums;/su);
 });

tests/ui-smoke.js

@@ -2480,7 +2480,7 @@ setTimeout(async () => {
         messageText: document.getElementById('updateMessage').textContent,
         progressLabel: progress.getAttribute('aria-label'),
         progressText: progress.getAttribute('aria-valuetext'),
-        progressDetails: document.getElementById('updateProgressDetails').textContent,
+        progressDetails: ['updateProgressSize', 'updateProgressSpeed', 'updateProgressEta'].map(id => document.getElementById(id).textContent).join('|'),
         progressState: progress.dataset.state,
         progressColor: getComputedStyle(progress).backgroundColor,
         progressTrackWidth: progress.parentElement.getBoundingClientRect().width,
@@ -2490,7 +2490,7 @@ setTimeout(async () => {
     })()\`);
     check('Busy update keeps its progress dialog open with a dangerous download cancellation action', busyUpdateState.display === 'flex' && busyUpdateState.hidden === 'false' && busyUpdateState.closeDisabled === true && busyUpdateState.dismissDisabled === false && busyUpdateState.dismissText === 'Download abbrechen' && busyUpdateState.dismissDanger === true && busyUpdateState.headerHidden === false);
     check('Update progress exposes an accessible live value', busyUpdateState.progressLabel === 'Update-Fortschritt' && busyUpdateState.progressText === 'Download 50%');
-    check('Update progress shows downloaded size, total size, speed, and ETA', busyUpdateState.progressDetails === '40.0 MB / 100.0 MB · 8.0 MB/s · ETA 00:08');
+    check('Update progress shows downloaded size, total size, speed, and ETA in stable columns', busyUpdateState.progressDetails === '40.0 MB / 100.0 MB|8.0 MB/s|ETA 00:08');
     check('Update download progress is green, wide, and places its status below the line', busyUpdateState.progressState === 'downloading' && busyUpdateState.progressColor === 'rgb(117, 211, 155)' && busyUpdateState.progressTrackWidth >= 390 && busyUpdateState.progressTextTop >= busyUpdateState.progressTrackBottom);
     check('Busy update preserves the available version subtitle while progress stays below the bar', busyUpdateState.messageHidden === false && busyUpdateState.messageText === 'Update v9.9.9 verfügbar');