From ce827e939ab31d041265a5d01067023f65062be8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastjan=20Arti=C4=8D?= <sebastjan@folx.tv>
Date: Thu, 30 Apr 2026 11:40:59 +0000
Subject: [PATCH] Trim bar: explicit width:100% + flex-shrink:0

Screenshot revealed: trim bar element has only 4px width even after
ResizeObserver fires. Likely the parent (.modal-content) is a flex
container that shrinks the trim-bar.

Force trim bar to take full width with width:100% and prevent shrinking
with flex-shrink:0.
---
 templates/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/index.html b/templates/index.html
index aa160db..ef12b47 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1030,7 +1030,7 @@
           <video id="edit-video" src="/api/source-video/${jobId}" controls preload="metadata" style="width:100%; max-height:50vh; background:#000; border-radius:6px;"></video>
           
           <!-- iPhone-style trim bar -->
-          <div id="trim-bar" style="position:relative; height:72px; margin-top:18px; background:#1a1a1a; border:2px solid #444; border-radius:8px; overflow:hidden; user-select:none; touch-action:none;">
+          <div id="trim-bar" style="position:relative; height:72px; width:100%; flex-shrink:0; box-sizing:border-box; margin-top:18px; background:#1a1a1a; border:2px solid #444; border-radius:8px; overflow:hidden; user-select:none; touch-action:none;">
             <!-- Selected region (highlighted) -->
             <div id="trim-region" style="position:absolute; top:0; bottom:0; left:${pctOfStr(startInit, videoDuration)}%; right:${(100 - parseFloat(pctOfStr(endInit, videoDuration))).toFixed(2)}%; background:linear-gradient(180deg, rgba(255,107,107,0.35), rgba(255,107,107,0.2)); border-top:4px solid #ff6b6b; border-bottom:4px solid #ff6b6b; z-index:1;"></div>