From ad17263b8272ebd4abb3b2f69087318057d6ce69 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com>
Date: Thu, 28 May 2026 21:53:44 -0700
Subject: [PATCH] fix: minor UI update

---
 .../event-list-panel/GlobalEventListTab.tsx   | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/event-list-panel/GlobalEventListTab.tsx b/src/components/event-list-panel/GlobalEventListTab.tsx
index 2d6d067..445f54b 100644
--- a/src/components/event-list-panel/GlobalEventListTab.tsx
+++ b/src/components/event-list-panel/GlobalEventListTab.tsx
@@ -186,48 +186,48 @@ const GlobalEventListTab: React.FC<GlobalEventListTabProps> = ({
   const markerRows = useMemo<MarkerRowData[]>(() => (
     showMarkers && markerTrack
       ? markerTrack.getRegions().filter((region): region is KGMarkerRegion => region instanceof KGMarkerRegion).map(region => ({
-          id: region.getId(),
-          type: 'marker',
-          region,
-          absoluteStartBeat: region.getStartFromBeat(),
-          durationBeats: region.getLength(),
-        }))
+        id: region.getId(),
+        type: 'marker',
+        region,
+        absoluteStartBeat: region.getStartFromBeat(),
+        durationBeats: region.getLength(),
+      }))
       : []
   ), [globalTracks, markerTrack, showMarkers]);
 
   const tempoRows = useMemo<TempoRowData[]>(() => (
     showTempo && tempoTrack
       ? getSortedTempoRegions(tempoTrack, timeSignature.numerator).map(region => ({
-          id: region.getId(),
-          type: 'tempo',
-          region,
-          absoluteStartBeat: region.getStartFromBeat(),
-          durationBeats: region.getLength(),
-        }))
+        id: region.getId(),
+        type: 'tempo',
+        region,
+        absoluteStartBeat: region.getStartFromBeat(),
+        durationBeats: region.getLength(),
+      }))
       : []
   ), [globalTracks, showTempo, tempoTrack, timeSignature.numerator]);
 
   const keySignatureRows = useMemo<KeySignatureRowData[]>(() => (
     showKeySignature && signatureTrack
       ? getSortedKeySignatureRegions(signatureTrack, timeSignature.numerator).map(region => ({
-          id: region.getId(),
-          type: 'key-signature',
-          region,
-          absoluteStartBeat: region.getStartFromBeat(),
-          durationBeats: region.getLength(),
-        }))
+        id: region.getId(),
+        type: 'key-signature',
+        region,
+        absoluteStartBeat: region.getStartFromBeat(),
+        durationBeats: region.getLength(),
+      }))
       : []
   ), [globalTracks, showKeySignature, signatureTrack, timeSignature.numerator]);
 
   const chordRows = useMemo<ChordRowData[]>(() => (
     showChords && chordTrack
       ? chordTrack.getRegions().filter((region): region is KGChordRegion => region instanceof KGChordRegion).map(region => ({
-          id: region.getId(),
-          type: 'chord',
-          region,
-          absoluteStartBeat: region.getStartFromBeat(),
-          durationBeats: region.getLength(),
-        }))
+        id: region.getId(),
+        type: 'chord',
+        region,
+        absoluteStartBeat: region.getStartFromBeat(),
+        durationBeats: region.getLength(),
+      }))
       : []
   ), [chordTrack, globalTracks, showChords]);
 
@@ -755,7 +755,7 @@ const GlobalEventListTab: React.FC<GlobalEventListTabProps> = ({
       <div className="event-list-tabs" role="tablist" aria-label="Global event filters">
         <button className={`event-list-tab${showMarkers ? ' active' : ''}`} aria-pressed={showMarkers} type="button" onClick={() => setShowMarkers(value => !value)}>Marker</button>
         <button className={`event-list-tab${showTempo ? ' active' : ''}`} aria-pressed={showTempo} type="button" onClick={() => setShowTempo(value => !value)}>Tempo</button>
-        <button className={`event-list-tab${showKeySignature ? ' active' : ''}`} aria-pressed={showKeySignature} type="button" onClick={() => setShowKeySignature(value => !value)}>Key Signature</button>
+        <button className={`event-list-tab${showKeySignature ? ' active' : ''}`} aria-pressed={showKeySignature} type="button" onClick={() => setShowKeySignature(value => !value)}>Key Sig.</button>
         <button className={`event-list-tab${showChords ? ' active' : ''}`} aria-pressed={showChords} type="button" onClick={() => setShowChords(value => !value)}>Chord</button>
       </div>