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.
This commit is contained in:
digital-garbage
2026-06-10 14:26:36 +03:00
parent b05fafff15
commit 7dc6b22d65
2 changed files with 5 additions and 3 deletions
+2 -2
View File
@@ -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; }
+3 -1
View File
@@ -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";