Fix CSP violations - use CSS classes instead of inline styles

CSP with nonce blocks all inline style attributes and JS
element.style modifications. Replace inline style="width: X%"
with CSS classes (progress-w-15, progress-w-30, etc.) and
use class swapping in the Stimulus controller.

Author: Sebbeben

assets/controllers/docker_update_progress_controller.js

@@ -342,17 +342,20 @@ export default class extends Controller {
 
     updateProgressBar(percent) {
         if (this.hasProgressBarTarget) {
-            this.progressBarTarget.style.width = percent + '%';
-            this.progressBarTarget.textContent = percent + '%';
-            this.progressBarTarget.setAttribute('aria-valuenow', percent);
-
-            this.progressBarTarget.classList.remove('bg-success', 'bg-danger', 'progress-bar-striped', 'progress-bar-animated');
+            const bar = this.progressBarTarget;
+            // Remove all width classes
+            bar.classList.remove('progress-w-0', 'progress-w-15', 'progress-w-30', 'progress-w-50', 'progress-w-65', 'progress-w-80', 'progress-w-100');
+            bar.classList.add('progress-w-' + percent);
+            bar.textContent = percent + '%';
+            bar.setAttribute('aria-valuenow', percent);
+
+            bar.classList.remove('bg-success', 'bg-danger', 'progress-bar-striped', 'progress-bar-animated');
             if (percent === 100) {
-                this.progressBarTarget.classList.add('bg-success');
+                bar.classList.add('bg-success');
             } else if (percent === 0) {
-                this.progressBarTarget.classList.add('bg-danger');
+                bar.classList.add('bg-danger');
             } else {
-                this.progressBarTarget.classList.add('progress-bar-striped', 'progress-bar-animated');
+                bar.classList.add('progress-bar-striped', 'progress-bar-animated');
             }
         }
     }

templates/admin/update_manager/docker_progress.html.twig

@@ -51,6 +51,15 @@
         100% { opacity: 0.3; }
     }
     .step-timestamp { min-width: 60px; text-align: right; }
+    /* Progress bar widths - CSS classes to avoid CSP inline style violations */
+    .docker-progress { height: 25px; }
+    .progress-w-0 { width: 0%; }
+    .progress-w-15 { width: 15%; }
+    .progress-w-30 { width: 30%; }
+    .progress-w-50 { width: 50%; }
+    .progress-w-65 { width: 65%; }
+    .progress-w-80 { width: 80%; }
+    .progress-w-100 { width: 100%; }
 </style>
 <div data-controller="docker-update-progress"
      data-docker-update-progress-health-url-value="{{ path('admin_update_manager_health') }}"
@@ -87,10 +96,9 @@
     </div>
 
     {# Progress Bar #}
-    <div class="progress mb-4" style="height: 25px;">
-        <div class="progress-bar progress-bar-striped progress-bar-animated"
+    <div class="progress mb-4 docker-progress">
+        <div class="progress-bar progress-bar-striped progress-bar-animated progress-w-15"
              role="progressbar"
-             style="width: 15%"
              aria-valuenow="15"
              aria-valuemin="0"
              aria-valuemax="100"