melhorando a leitura de projetos no mmpCreator

assets/js/creations/audio/audio_ui.js

@@ -248,7 +248,7 @@ export function renderAudioEditor() {
     const menu = document.getElementById("ruler-context-menu");
     const currentPixelsPerSecond = getPixelsPerSecond();
     const rect = newRuler.getBoundingClientRect();
-    const scrollLeft = newRuler.scrollLeft;
+    const scrollLeft = scrollEl.scrollLeft;
     const clickX = e.clientX - rect.left;
     const absoluteX = clickX + scrollLeft;
     const clickTime = absoluteX / currentPixelsPerSecond;
@@ -527,15 +527,15 @@ export function renderAudioEditor() {
       .forEach((g) => (g.style.width = `${widthPx}px`));
   }
 
-  newTrackContainer.addEventListener("scroll", () => {
+  // Sync Scroll
   newTrackContainer.addEventListener("scroll", () => {
     const scrollPos = scrollEl.scrollLeft;
 
+    // sincroniza régua com o container
     const mainRuler = tracksParent.querySelector(".timeline-ruler");
     if (mainRuler && mainRuler.scrollLeft !== scrollPos) {
-      mainRuler.scrollLeft = scrollPos; // funciona com overflow hidden (scroll programático)
+      mainRuler.scrollLeft = scrollPos;
     }
-    });
 
     // expansão "infinita"
     const threshold = 300;
@@ -545,16 +545,15 @@ export function renderAudioEditor() {
     if (rightEdge > currentWidth - threshold) {
       const newWidth = Math.ceil(currentWidth * 1.5);
 
-      // aplica widths
       applyTimelineWidth(newWidth);
 
-      // adiciona mais marcadores na régua (sem re-render geral)
       const rulerEl = tracksParent.querySelector(".timeline-ruler");
       appendRulerMarkers(rulerEl, currentWidth, newWidth, barWidthPx);
     }
   });
 
 
+
   // Event Listener Principal (mousedown)
   newTrackContainer.addEventListener("mousedown", (e) => {
     document.getElementById("timeline-context-menu").style.display = "none";