From 9f536d9687b9a713b6833eceaa9badc559f5117f Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com>
Date: Sat, 2 May 2026 22:55:27 -0700
Subject: [PATCH] fix: recording preview notes are not taking region position
 into consideration

---
 src/components/piano-roll/PianoRollContent.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/piano-roll/PianoRollContent.tsx b/src/components/piano-roll/PianoRollContent.tsx
index c2a1d9a..3bea46c 100644
--- a/src/components/piano-roll/PianoRollContent.tsx
+++ b/src/components/piano-roll/PianoRollContent.tsx
@@ -249,12 +249,13 @@ const PianoRollContent: React.FC<PianoRollContentProps> = ({
     if (!isRecording || !activeRegion || recordingNotes.length === 0) return null;
     const beatWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--region-grid-beat-width')) || 40;
     const noteHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--region-piano-key-height')) || 20;
+    const regionStartBeat = activeRegion.getStartFromBeat();
     return recordingNotes.map((note, index) => (
       <div
         key={`recording-note-${index}`}
         className="piano-grid-recording-note"
         style={{
-          left: note.startBeat * beatWidth,
+          left: (note.startBeat + regionStartBeat) * beatWidth,
           top: (107 - note.pitch) * noteHeight,
           width: Math.max((note.endBeat - note.startBeat) * beatWidth, 4),
           height: noteHeight,