From 7dc6b22d65983f5de9f9f0dcc06e13a069c212f5 Mon Sep 17 00:00:00 2001
From: digital-garbage <133010426+digital-garbage@users.noreply.github.com>
Date: Wed, 10 Jun 2026 14:26:36 +0300
Subject: [PATCH] Movie Editor: keep scene audio clips within video clip width

Audio blocks were growing past their scene duration because flex
content and min-width: 48px overrode the inline width. Match video
clip sizing, cap max-width, and let the volume slider shrink inside.
---
 movie_editor/frontend/styles.css  | 4 ++--
 movie_editor/frontend/timeline.js | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/movie_editor/frontend/styles.css b/movie_editor/frontend/styles.css
index e838af4b..dd99088d 100644
--- a/movie_editor/frontend/styles.css
+++ b/movie_editor/frontend/styles.css
@@ -452,12 +452,12 @@ input[type=number] { font-family: var(--font-mono); }
 .tl-audio-lane-body { position: absolute; inset: 0; }
 .tl-aud-clip { position: absolute; top: 5px; bottom: 5px; box-sizing: border-box;
   background: linear-gradient(180deg, #1e3a2f, #152820); border: 1px solid #2d5a45; border-radius: 5px;
-  display: flex; align-items: center; gap: 6px; padding: 0 8px; min-width: 48px; overflow: hidden; }
+  display: flex; align-items: center; gap: 6px; padding: 0 8px; min-width: 0; overflow: hidden; }
 .tl-aud-clip.scene-aud { cursor: pointer; }
 .tl-aud-clip.scene-aud.selected { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal-soft); }
 .tl-aud-clip.ins { background: linear-gradient(180deg, #1a2840, #121c2e); border-color: #2a4468; }
 .tl-aud-name { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
-.tl-aud-vol { width: 56px; flex: 0 0 auto; accent-color: var(--teal); }
+.tl-aud-vol { width: 56px; max-width: 42%; flex: 0 1 56px; min-width: 0; accent-color: var(--teal); }
 .tl-aud-rm { flex: 0 0 auto; }
 .tl-emptyhint { position: absolute; left: 16px; top: 20px; color: var(--faint); font-style: italic; }
 
diff --git a/movie_editor/frontend/timeline.js b/movie_editor/frontend/timeline.js
index d998f963..0ca94c28 100644
--- a/movie_editor/frontend/timeline.js
+++ b/movie_editor/frontend/timeline.js
@@ -317,9 +317,11 @@
 
   function sceneAudioClip(st, p, scene, index, leftPx, widthPx) {
     const vol = scene.audio_volume != null ? scene.audio_volume : 1;
+    const w = Math.max(widthPx, 8);  // match video clip min width — never grow past scene duration
     const clip = el("div", "tl-aud-clip scene-aud" + (scene.id === st.selectedSceneId ? " selected" : ""));
     clip.style.left = leftPx + "px";
-    clip.style.width = Math.max(widthPx, 40) + "px";
+    clip.style.width = w + "px";
+    clip.style.maxWidth = w + "px";
     clip.onclick = (e) => { e.stopPropagation(); S.selectScene(scene.id); };
     clip.append(el("span", "tl-aud-name", `S${index + 1}`));
     const slider = el("input", "tl-aud-vol"); slider.type = "range"; slider.min = "0"; slider.max = "2"; slider.step = "0.05";