From 0554934ebe97954421a3b6e8e33a830ef437dfd9 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Sat, 25 Jul 2026 09:40:53 +0700
Subject: [PATCH] fix: increase followMargin from 120px to 0.4*viewport for bar
 visibility ahead of dragged item

---
 app/static/js/app.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/static/js/app.jsx b/app/static/js/app.jsx
index acc4eee..2bdfc32 100644
--- a/app/static/js/app.jsx
+++ b/app/static/js/app.jsx
@@ -10220,7 +10220,7 @@ const App = () => {
       const clampedStart = Math.min(rawStart, marginBar);
       const newStart = snapTime(clampedStart, snapValueRef.current, bpmRef.current);
       const itemPx = newStart * zoom;
-      const followMargin = 120;
+      const followMargin = Math.round(rect.width * 0.4);
       if (itemPx > scrollLeft + rect.width - followMargin) {
         wrapper.scrollLeft = itemPx - rect.width + followMargin;
         setCanvasRedrawCount(n => n + 1);
@@ -10386,7 +10386,7 @@ const App = () => {
       const marginBar = maxDurationRef.current - secondsPerBar;
       const newStart = Math.max(beatSec, Math.min(time - drag.clickOffset, marginBar));
       const itemPx = newStart * zoom;
-      const followMargin = 120;
+      const followMargin = Math.round(rect.width * 0.4);
       if (itemPx > scrollLeft + rect.width - followMargin) {
         wrapper.scrollLeft = itemPx - rect.width + followMargin;
         setCanvasRedrawCount(n => n + 1);
@@ -10483,7 +10483,7 @@ const App = () => {
           : { ...t, midiItems: items };
       }));
       const edgePx = (resize.side === 'left' ? Math.max(0, time) : time) * zoom;
-      const followMargin = 120;
+      const followMargin = Math.round(rect.width * 0.4);
       if (edgePx > scrollLeft + rect.width - followMargin) {
         wrapper.scrollLeft = edgePx - rect.width + followMargin;
         setCanvasRedrawCount(n => n + 1);