From fbd13eef9fff6aa3dc28438f9af8b26a26688ed1 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com>
Date: Mon, 15 Dec 2025 21:48:03 -0800
Subject: [PATCH] fix: default chord guide note's length to last edited note's
 length

---
 src/components/piano-roll/PianoGrid.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/piano-roll/PianoGrid.tsx b/src/components/piano-roll/PianoGrid.tsx
index 8ae120f..142386a 100644
--- a/src/components/piano-roll/PianoGrid.tsx
+++ b/src/components/piano-roll/PianoGrid.tsx
@@ -5,6 +5,7 @@ import SelectionBox from './SelectionBox';
 import { isModifierKeyPressed } from '../../util/osUtil';
 import { generatePianoGridBackground, getMatchingChordsForPitch } from '../../util/scaleUtil';
 import type { KeySignature } from '../../core/KGProject';
+import { KGPianoRollState } from '../../core/state/KGPianoRollState';
 
 interface PianoGridProps {
   gridRef: MutableRefObject<HTMLDivElement | null>;
@@ -166,6 +167,8 @@ const PianoGrid: React.FC<PianoGridProps> = ({
     return highlights;
   }, [cursorPosition, matchingChords, selectedChordIndex]);
 
+  const lastEditedNoteLength = KGPianoRollState.instance().getLastEditedNoteLength();
+
   // Reset selected chord index when cursor moves to a different pitch or beat
   useEffect(() => {
     setSelectedChordIndex(0);
@@ -235,7 +238,7 @@ const PianoGrid: React.FC<PianoGridProps> = ({
                   style={{
                     top: yPosition,
                     left: highlight.beat * beatWidth,
-                    width: beatWidth,
+                    width: beatWidth * lastEditedNoteLength,
                     height: noteHeight
                   }}
                 />