Fix: Blue box reshaping with window size

text_explanations.py

@@ -56,53 +56,81 @@ css = """#myProgress {
 
 js_progress_bar = """
     function move(start, end, total_duration, current_index, n_ann, total_ann) {
+    var elem = document.getElementById("myBar");
+    elem.style.width = (n_ann / total_ann) * 100 + "%";
+    const index = current_index + 1;
+    progressText.innerText = `${index} / ${total_ann} (Completed: ${n_ann})`;
+
+    const waveform = document.querySelector('#audio_to_annotate #waveform div');
+    if (!waveform) return;
+    const shadowRoot = waveform.shadowRoot;
+    if (!shadowRoot) return;
+    const canvases = shadowRoot.querySelector('.wrapper');
+    if (!canvases) return;
+
+    const leftOffsetPct = start / total_duration;
+    const widthPct = (end - start) / total_duration;
+
+    // Ensure there is a single style element we can update
+    let style = shadowRoot.querySelector('style[data-overlay-style="true"]');
+    if (!style) {
+        style = document.createElement('style');
+        style.setAttribute('data-overlay-style', 'true');
+        shadowRoot.appendChild(style);
+    }
 
-        var elem = document.getElementById("myBar");
-        elem.style.width = n_ann/total_ann * 100 + "%";
-        index = current_index + 1
-        progressText.innerText = `${index} / ${total_ann} (Completed: ${n_ann})`;
-        
-        const waveform = document.querySelector('#audio_to_annotate #waveform div');
-        const shadowRoot = waveform.shadowRoot;
-        const canvases = shadowRoot.querySelector('.wrapper');
-
-        console.log(canvases.offsetWidth)
-
-        const leftOffsetPct = start / total_duration;
-        const widthPct = (end - start) / total_duration;
+    // Function to (re)compute and apply the rule
+    const applyOverlayRule = () => {
         
-        // Get CSS variable for background color
-        const blockColor = getComputedStyle(document.documentElement)
-            .getPropertyValue('--block-title-background-fill')
-            .trim() || 'red'; // Default to red if variable is not found
-
-        // Create a style element for the shadow DOM
-        const style = document.createElement('style');
+        const w = canvases.offsetWidth || 0;
         style.textContent = `
+        .wrapper { position: relative; }
         .wrapper::after {
             content: '';
             position: absolute;
             top: 0;
-            left: ${canvases.offsetWidth * leftOffsetPct}px;
-            width: ${canvases.offsetWidth * widthPct}px;
+            left: ${w * leftOffsetPct}px;
+            width: ${w * widthPct}px;
             height: 100%;
             background-color: blue;
             z-index: 999;
             opacity: 0.5;
+            pointer-events: none;
         }
+        `;
+    };
+
+    // Apply once now
+    applyOverlayRule();
+
+    // Attach a single ResizeObserver (memoized on the element)
+    if (!canvases.__overlayResizeObserver) {
+        const ro = new ResizeObserver(() => {
+        applyOverlayRule();
+        });
+        ro.observe(canvases);
+        canvases.__overlayResizeObserver = ro;
+
+        // Optional: also respond to window resizes (covers zoom/scrollbar layout edge cases)
+        const onWinResize = () => applyOverlayRule();
+        window.addEventListener('resize', onWinResize);
+        canvases.__overlayWinResizeCleanup = () => window.removeEventListener('resize', onWinResize);
+    }
 
-        /* Ensure parent has positioning context */
-        .wrapper {
-            position: relative;
+    // Optional: cleanup helper you can call when tearing down the UI
+    canvases.__cleanupOverlay = () => {
+        if (canvases.__overlayResizeObserver) {
+        canvases.__overlayResizeObserver.disconnect();
+        delete canvases.__overlayResizeObserver;
         }
-        `;
+        if (canvases.__overlayWinResizeCleanup) {
+        canvases.__overlayWinResizeCleanup();
+        delete canvases.__overlayWinResizeCleanup;
+        }
+    };
 
-        // Append the style to the shadow root
-        shadowRoot.appendChild(style);
+    } 
 
-        console.log(start + ' ' + end + ' ' + total_duration);
-        console.log(n_ann + ' ' + total_ann);
-    }
     """