fix: optically center the ETA separator

Right-align the speed before the separator and left-align ETA after it so the second metric divider sits exactly between the visible values.

renderer/styles.css

@@ -2576,11 +2576,14 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   place-items: center;
 }
 
-#updateProgressSpeed,
-#updateProgressEta {
+#updateProgressSpeed {
   text-align: right;
 }
 
+#updateProgressEta {
+  text-align: left;
+}
+
 #updateProgressText {
   min-width: 34px;
   max-width: 100%;

tests/startup-renderer.test.js

@@ -179,6 +179,8 @@ test('header occupies its final geometry before asynchronous initialization', ()
   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 2ch 11ch 2ch 10ch;[^}]*column-gap:\s*0;[^}]*font-variant-numeric:\s*tabular-nums;/su);
   assert.match(css, /\.update-progress-separator\s*\{[^}]*display:\s*grid;[^}]*place-items:\s*center;/su);
+  assert.match(css, /#updateProgressSpeed\s*\{[^}]*text-align:\s*right;/su);
+  assert.match(css, /#updateProgressEta\s*\{[^}]*text-align:\s*left;/su);
   assert.match(css, /\.update-release-heading\s*\{[^}]*color:\s*var\(--success\);[^}]*font-size:\s*14px;[^}]*font-weight:\s*750;/su);
   assert.match(css, /\.update-release-category\s*\{[^}]*font-size:\s*13px;[^}]*font-weight:\s*700;/su);
   assert.match(css, /#updateProgressDetails\[hidden\]\s*\{[^}]*display:\s*none;/su);