From d4cc4c8a371a6ea648cdfb1aa7e588071579ca08 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com>
Date: Mon, 25 May 2026 14:17:35 -0700
Subject: [PATCH] fix: add ellipsis truncation for long track and piano roll
 titles

---
 src/components/piano-roll/PianoRoll.css | 4 ++++
 src/components/track/Track.css          | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/piano-roll/PianoRoll.css b/src/components/piano-roll/PianoRoll.css
index 5cb6bcd..e220217 100644
--- a/src/components/piano-roll/PianoRoll.css
+++ b/src/components/piano-roll/PianoRoll.css
@@ -311,6 +311,7 @@
 
 .piano-roll-title {
   flex: 1;
+  min-width: 0;
   text-align: center;
   font-size: 12px;
   font-weight: bold;
@@ -319,6 +320,9 @@
   cursor: text;
   padding: 5px;
   border-radius: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .piano-roll-title-input {
diff --git a/src/components/track/Track.css b/src/components/track/Track.css
index a17e470..47a946c 100644
--- a/src/components/track/Track.css
+++ b/src/components/track/Track.css
@@ -94,10 +94,12 @@
 /* Remove drag indicator since hover cursor is sufficient */
 
 .track-name {
-  display: flex;
-  align-items: center;
+  display: block;
   min-height: 24px;
+  width: 100%;
+  min-width: 0;
   font-size: 12px;
+  line-height: 24px;
   cursor: text;
   overflow: hidden;
   text-overflow: ellipsis;