melhorando a leitura de projetos no mmpCreator

assets/css/creator.css

@@ -322,20 +322,20 @@ body.sidebar-hidden .sample-browser { width: 0; min-width: 0; border-right: none
   display: flex;
   flex-direction: column;
   position: relative;
-  overflow: hidden;
+  overflow-x: hidden;   
-  position: relative;
+  overflow-y: auto;   
-  overflow-x: auto;   /* barra horizontal */
-  overflow-y: auto;   /* se quiser rolar vertical com várias tracks */
 }
 
 /* Importantíssimo: esses caras precisam poder ficar mais largos que a tela */
 #audio-timeline-ruler,
 #audio-track-container{
+  flex-grow: 1;
+  overflow-x: auto;
+  overflow-y: auto;
   position: relative;
   min-width: 100%;    /* no mínimo ocupa a viewport */
 }
 
-#audio-track-container { flex-grow: 1; overflow: auto; }
 .audio-track-lane { display: flex; flex-direction: row; align-items: stretch; background-color: var(--bg-editor); border-bottom: 1px solid var(--bg-toolbar); min-height: 90px; box-sizing: border-box; }
 .audio-track-lane.drag-over { background-color: #40454d; }
 .audio-track-lane .track-info { width: var(--track-info-width); flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; background-color: #383c42; border-right: 2px solid var(--border-color); }

assets/js/creations/audio/audio_ui.js

@@ -225,7 +225,7 @@ export function renderAudioEditor() {
     e.preventDefault();
     const handleSeek = (event) => {
       const rect = newRuler.getBoundingClientRect();
-      const scrollLeft = newRuler.scrollLeft;
+      const scrollLeft = scrollEl.scrollLeft;
       const clickX = event.clientX - rect.left;
       const absoluteX = clickX + scrollLeft;
       const newTime = absoluteX / currentPixelsPerSecond;
@@ -261,6 +261,8 @@ export function renderAudioEditor() {
   // Recriação Container Pistas
   const newTrackContainer = existingTrackContainer.cloneNode(false);
   tracksParent.replaceChild(newTrackContainer, existingTrackContainer);
+  // ✅ único scroller horizontal/vertical do editor
+  const scrollEl = newTrackContainer;
 
   // === RENDERIZAÇÃO DAS PISTAS (LANES) ===
   
@@ -279,6 +281,7 @@ export function renderAudioEditor() {
     const audioTrackLane = document.createElement("div");
     audioTrackLane.className = "audio-track-lane";
     audioTrackLane.dataset.trackId = trackData.id;
+    audioTrackLane.style.minWidth = `calc(var(--track-info-width) + ${totalWidth}px)`;
     
     // Ícone dinâmico
     let iconHTML = '<i class="fa-solid fa-music"></i>';
@@ -326,7 +329,7 @@ export function renderAudioEditor() {
       const filePath = e.dataTransfer.getData("text/plain");
       if (!filePath) return;
       const rect = timelineContainer.getBoundingClientRect();
-      const dropX = e.clientX - rect.left + timelineContainer.scrollLeft;
+      const dropX = e.clientX - rect.left + scrollEl.scrollLeft;
       let startTimeInSeconds = dropX / pixelsPerSecond;
       startTimeInSeconds = quantizeTime(startTimeInSeconds);
       if (!trackData.id || startTimeInSeconds == null || isNaN(startTimeInSeconds)) return;
@@ -518,12 +521,12 @@ export function renderAudioEditor() {
   }
 
   newTrackContainer.addEventListener("scroll", () => {
-    const scrollPos = newTrackContainer.scrollLeft;
+    scrollEl.addEventListener("scroll", () => {
+    const scrollPos = scrollEl.scrollLeft;
 
-    // sync ruler
     const mainRuler = tracksParent.querySelector(".timeline-ruler");
     if (mainRuler && mainRuler.scrollLeft !== scrollPos) {
-      mainRuler.scrollLeft = scrollPos;
+      mainRuler.scrollLeft = scrollPos; // funciona com overflow hidden (scroll programático)
     }
 
     // expansão "infinita"
@@ -570,7 +573,7 @@ export function renderAudioEditor() {
       const timelineContainer = clipElement.closest(".timeline-container");
       const rect = timelineContainer.getBoundingClientRect();
       const clickX = e.clientX - rect.left;
-      const absoluteX = clickX + timelineContainer.scrollLeft;
+      const absoluteX = clickX + scrollEl.scrollLeft;
       let sliceTimeInTimeline = absoluteX / currentPixelsPerSecond;
       sliceTimeInTimeline = quantizeTime(sliceTimeInTimeline);
       sliceAudioClip(clipId, sliceTimeInTimeline);
@@ -723,7 +726,7 @@ export function renderAudioEditor() {
         const newTrackId = finalLane.dataset.trackId;
         const timelineContainer = finalLane.querySelector(".timeline-container");
         const wrapperRect = timelineContainer.getBoundingClientRect();
-        const newLeftPx = upEvent.clientX - wrapperRect.left - clickOffsetInClip + timelineContainer.scrollLeft;
+        const newLeftPx = upEvent.clientX - wrapperRect.left - clickOffsetInClip + scrollEl.scrollLeft;
         const constrainedLeftPx = Math.max(0, newLeftPx);
         let newStartTime = constrainedLeftPx / currentPixelsPerSecond;
         newStartTime = quantizeTime(newStartTime);
@@ -743,7 +746,7 @@ export function renderAudioEditor() {
       e.preventDefault();
       const handleSeek = (event) => {
         const rect = timelineContainer.getBoundingClientRect();
-        const scrollLeft = timelineContainer.scrollLeft;
+        const scrollLeft = scrollEl.scrollLeft;
         const clickX = event.clientX - rect.left;
         const absoluteX = clickX + scrollLeft;
         const newTime = absoluteX / currentPixelsPerSecond;