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:
@@ -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; }
|
||||
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user