diff --git a/app/templates/index.html b/app/templates/index.html
index b769015..f63d915 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1613,38 +1613,36 @@
                 setLocalSelectionEnd(null);
             };
 
-            const handleRulerMouseDown = (e) => {
-                const ruler = rulerRef.current;
-                if (!ruler) return;
-                const rect = ruler.getBoundingClientRect();
-                const wrapper = timelineWrapperRef.current;
-                const scrollLeft = wrapper ? wrapper.scrollLeft : 0;
-                const mouseX = e.clientX - rect.left + scrollLeft;
-                const time = mouseX / zoom;
-                
-                clearLocalSelection();
-                setSelectionMode('global');
-                rulerDragStartRef.current = time;
-                isDraggingRulerRef.current = true;
-                setSelectionStart(time);
-                setSelectionEnd(time);
-                setCurrentTime(time);
-            };
+             const handleRulerMouseDown = (e) => {
+                 const wrapper = timelineWrapperRef.current;
+                 if (!wrapper) return;
+                 const rect = wrapper.getBoundingClientRect();
+                 const scrollLeft = wrapper.scrollLeft;
+                 const mouseX = e.clientX - rect.left + scrollLeft - 300;
+                 const time = mouseX / zoom;
+                 
+                 clearLocalSelection();
+                 setSelectionMode('global');
+                 rulerDragStartRef.current = time;
+                 isDraggingRulerRef.current = true;
+                 setSelectionStart(time);
+                 setSelectionEnd(time);
+                 setCurrentTime(time);
+             };
 
-            // Global Ruler mousemove is tracked via document listener set up in useEffect
-            useEffect(() => {
-                const handleMouseMove = (e) => {
-                    if (!isDraggingRulerRef.current) return;
-                    const ruler = rulerRef.current;
-                    const wrapper = timelineWrapperRef.current;
-                    if (!ruler || !wrapper) return;
-                    const rect = ruler.getBoundingClientRect();
-                    const scrollLeft = wrapper.scrollLeft;
-                    const mouseX = e.clientX - rect.left + scrollLeft;
-                    const time = Math.max(0, Math.min(maxDuration, mouseX / zoom));
-                    
-                    setSelectionEnd(time);
-                };
+             // Global Ruler mousemove is tracked via document listener set up in useEffect
+             useEffect(() => {
+                 const handleMouseMove = (e) => {
+                     if (!isDraggingRulerRef.current) return;
+                     const wrapper = timelineWrapperRef.current;
+                     if (!wrapper) return;
+                     const rect = wrapper.getBoundingClientRect();
+                     const scrollLeft = wrapper.scrollLeft;
+                     const mouseX = e.clientX - rect.left + scrollLeft - 300;
+                     const time = Math.max(0, Math.min(maxDuration, mouseX / zoom));
+                     
+                     setSelectionEnd(time);
+                 };
                 const handleMouseUp = () => {
                     if (isDraggingRulerRef.current) {
                         isDraggingRulerRef.current = false;
@@ -1678,16 +1676,16 @@
 
              // Document-level mousemove/mouseup for local selection drag
              useEffect(() => {
-                 const handleMouseMove = (e) => {
-                     if (!localDragInProgressRef.current) return;
-                     const wrapper = timelineWrapperRef.current;
-                     if (!wrapper) return;
-                     const rect = wrapper.getBoundingClientRect();
-                     const scrollLeft = wrapper.scrollLeft;
-                     const mouseX = e.clientX - rect.left + scrollLeft;
-                     const time = Math.max(0, Math.min(maxDuration, mouseX / zoom));
-                     setLocalSelectionEnd(time);
-                 };
+                  const handleMouseMove = (e) => {
+                      if (!localDragInProgressRef.current) return;
+                      const wrapper = timelineWrapperRef.current;
+                      if (!wrapper) return;
+                      const rect = wrapper.getBoundingClientRect();
+                      const scrollLeft = wrapper.scrollLeft;
+                      const mouseX = e.clientX - rect.left + scrollLeft - 300;
+                      const time = Math.max(0, Math.min(maxDuration, mouseX / zoom));
+                      setLocalSelectionEnd(time);
+                  };
                  const handleMouseUp = () => {
                      if (localDragInProgressRef.current) {
                          localDragInProgressRef.current = false;
@@ -1776,18 +1774,18 @@
             };
 
              useEffect(() => {
-                 const handleMouseMove = (e) => {
-                     const drag = draggedClipRef.current;
-                     if (!drag) return;
-                     
-                     const wrapper = timelineWrapperRef.current;
-                     if (!wrapper) return;
-                     
-                     const rect = wrapper.getBoundingClientRect();
-                     const scrollLeft = wrapper.scrollLeft;
-                     const mouseX = e.clientX - rect.left + scrollLeft;
-                     const time = mouseX / zoom;
-                     const rawStart = Math.max(0, time - drag.clickOffset);
+                  const handleMouseMove = (e) => {
+                      const drag = draggedClipRef.current;
+                      if (!drag) return;
+                      
+                      const wrapper = timelineWrapperRef.current;
+                      if (!wrapper) return;
+                      
+                      const rect = wrapper.getBoundingClientRect();
+                      const scrollLeft = wrapper.scrollLeft;
+                      const mouseX = e.clientX - rect.left + scrollLeft - 300;
+                      const time = mouseX / zoom;
+                      const rawStart = Math.max(0, time - drag.clickOffset);
                      const newStart = snapTime(rawStart, snapValueRef.current, bpmRef.current);
 
                     const targetTrackId = hoveredTrackIdRef.current || drag.trackId;