diff --git a/app/storage/sonicforge.db b/app/storage/sonicforge.db
index 0abd537..ac70a80 100644
Binary files a/app/storage/sonicforge.db and b/app/storage/sonicforge.db differ
diff --git a/app/templates/index.html b/app/templates/index.html
index 63d98af..46e4033 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1166,7 +1166,7 @@
 
                 // Draw waveform inside clip (speed-adjusted) with fade envelope applied
                 const drawXStart = Math.max(0, Math.floor(xStart));
-                const drawXEnd = Math.min(w, Math.ceil(xEnd));
+                const drawXEnd = Math.min(drawWidth, Math.ceil(xEnd));
                 const samplesPerPixel = (buffer.sampleRate / zoom) * speed;
                 const bufDur = buffer.duration;
                 const mid = h / 2;
@@ -1419,7 +1419,7 @@
                 }
 
                 // Draw right-edge stretch handle indicator
-                if (wClip > 0 && wClip < w) {
+                if (wClip > 0 && wClip < drawWidth) {
                     ctx.strokeStyle = clipColor;
                     ctx.lineWidth = 1.5;
                     ctx.setLineDash([3, 3]);
@@ -2037,22 +2037,22 @@
                 ctx.strokeStyle = '#2a2a4e';
                 ctx.lineWidth = 0.5;
                 for (let t = 0; t <= buffer.duration; t += 0.5) {
-                    const x = (t / buffer.duration) * w;
+                    const x = (t / buffer.duration) * drawWidth;
                     ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();
                 }
                 for (let i = 0; i <= 10; i++) {
                     const y = (i / 10) * h;
-                    ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
+                    ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(drawWidth, y); ctx.stroke();
                 }
 
                 if (fadeInLen > 0) {
-                    const fadeX = (fadeInLen / buffer.duration) * w;
+                    const fadeX = (fadeInLen / buffer.duration) * drawWidth;
                     ctx.fillStyle = 'rgba(16, 185, 129, 0.12)';
                     ctx.fillRect(0, 0, fadeX, h);
                 }
                 if (fadeOutLen > 0) {
-                    const fadeX = ((buffer.duration - fadeOutLen) / buffer.duration) * w;
-                    const fadeW = (fadeOutLen / buffer.duration) * w;
+                    const fadeX = ((buffer.duration - fadeOutLen) / buffer.duration) * drawWidth;
+                    const fadeW = (fadeOutLen / buffer.duration) * drawWidth;
                     ctx.fillStyle = 'rgba(239, 68, 68, 0.12)';
                     ctx.fillRect(fadeX, 0, fadeW, h);
                 }
@@ -2063,13 +2063,13 @@
                     ctx.lineWidth = 2;
                     ctx.beginPath();
                     nodes.forEach((n, i) => {
-                        const x = (n.time / buffer.duration) * w;
+                        const x = (n.time / buffer.duration) * drawWidth;
                         const y = nodeY(n, h);
                         if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
                     });
                     ctx.stroke();
                     nodes.forEach((n, i) => {
-                        const x = (n.time / buffer.duration) * w;
+                        const x = (n.time / buffer.duration) * drawWidth;
                         const y = nodeY(n, h);
                         ctx.fillStyle = graphMode === 'pan' ? '#a855f7' : '#06b6d4';
                         ctx.beginPath(); ctx.arc(x, y, 5, 0, Math.PI * 2); ctx.fill();
@@ -2081,7 +2081,7 @@
                     ctx.fillStyle = '#52525b';
                     ctx.font = '11px sans-serif';
                     ctx.textAlign = 'center';
-                    ctx.fillText(graphMode === 'pan' ? 'Click to add Pan points' : 'Click to add Volume points', w / 2, h / 2);
+                    ctx.fillText(graphMode === 'pan' ? 'Click to add Pan points' : 'Click to add Volume points', drawWidth / 2, h / 2);
                     ctx.textAlign = 'start';
                 }
 
@@ -2089,7 +2089,7 @@
                 ctx.strokeStyle = graphMode === 'pan' ? '#a855f744' : '#06b6d444';
                 ctx.lineWidth = 1;
                 ctx.setLineDash([4, 4]);
-                ctx.beginPath(); ctx.moveTo(0, zeroY); ctx.lineTo(w, zeroY); ctx.stroke();
+                ctx.beginPath(); ctx.moveTo(0, zeroY); ctx.lineTo(drawWidth, zeroY); ctx.stroke();
                 ctx.setLineDash([]);
 
             }, [buffer, zoom, timelineWidth, volumeNodes, panningNodes, fadeInLen, fadeOutLen, graphMode]);