From 67a8610843e0ac0e13c0d252c02efbf08ef30f33 Mon Sep 17 00:00:00 2001
From: Gronod <gordon@i3omb.com>
Date: Sun, 17 May 2026 08:55:06 +0100
Subject: [PATCH] fix: use CSS custom property for timing bar width to bypass
 CSP blocking

Inline style= attributes containing property:value pairs are blocked by
strict style-src-attr CSP. CSS custom properties (--foo:value) set via
style= are treated as data not styles and are not subject to this
restriction. The width is now resolved in the stylesheet via
var(--bar-w, 100%) so CSP cannot interfere.
---
 public/app.js    | 2 +-
 public/style.css | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/app.js b/public/app.js
index f441acc..7015d26 100644
--- a/public/app.js
+++ b/public/app.js
@@ -710,7 +710,7 @@ function renderStatusPanel(data, panel) {
       html += `
           <div class="timing-row">
             <span class="timing-label">${escapeHtml(t.label)}</span>
-            <div class="timing-bar-bg"><div class="timing-bar" style="width:${barWidth.toFixed(1)}%"></div></div>
+            <div class="timing-bar-bg"><div class="timing-bar" style="--bar-w:${barWidth.toFixed(1)}%"></div></div>
             <span class="timing-value">${t.ms}ms</span>
           </div>`;
     }
diff --git a/public/style.css b/public/style.css
index 8e8220b..4f71711 100644
--- a/public/style.css
+++ b/public/style.css
@@ -952,6 +952,7 @@ body {
 
 .timing-bar {
   height: 100%;
+  width: var(--bar-w, 100%);
   background: var(--accent);
   border-radius: 4px;
   min-width: 2px;