From 4f7d8df6591d9aefe122ddd411f344ffa4e52636 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastjan=20Arti=C4=8D?= <sebastjan@folx.tv>
Date: Thu, 30 Apr 2026 11:38:20 +0000
Subject: [PATCH] Fix trim bar handles invisible: ResizeObserver + rAF

Root cause found via puppeteer inspection:
- trimBarWidth was 4px when renderTrim() ran
- That made calc(32.64% - 12px) = ~-10px, putting handles offscreen left

Modal element gets actual width AFTER appendChild + browser layout pass.
Original code called renderTrim() synchronously right after appendChild,
before the modal had real dimensions.

Fix:
1. Use ResizeObserver on trim-bar to re-render whenever it gets actual width
2. Also use double requestAnimationFrame as fallback (waits for layout)

Verified via puppeteer:
  Before: leftStyle='calc(32.6443% - 12px)' but trimBarWidth=4
  After: handles correctly positioned within visible bar
---
 templates/index.html | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index c39c6d5..aa160db 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1218,14 +1218,27 @@
         if (which === "start") video.play();
       };
       
-      // Initial render
+      // Initial render — počakaj da DOM ima dimenzije (modal je bil pravkar dodan)
       console.log("[EditModal] init", { startInit, endInit, videoDuration, trimStart, trimEnd });
-      renderTrim();
-      renderPlayhead();
-      console.log("[EditModal] after renderTrim", { 
-        leftStyle: handleL.style.left, 
-        rightStyle: handleR.style.left,
-        trimBarWidth: trimBar.getBoundingClientRect().width 
+      
+      // ResizeObserver: ko se trim-bar dobi pravilno širino, re-render
+      const ro = new ResizeObserver(() => {
+        renderTrim();
+        renderPlayhead();
+      });
+      ro.observe(trimBar);
+      
+      // Tudi takoj renderiraj (za primer, da se ResizeObserver ne sproži)
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          renderTrim();
+          renderPlayhead();
+          console.log("[EditModal] after renderTrim", { 
+            leftStyle: handleL.style.left, 
+            rightStyle: handleR.style.left,
+            trimBarWidth: trimBar.getBoundingClientRect().width 
+          });
+        });
       });
       
       // Save button