fix: changed styling of track titles to display nicely with long title names

src/ui/Track/Track.css

@@ -1,3 +1,11 @@
+.vertical-mode .track {
+    height: 36px;
+}
+
+.vertical-mode .track {
+    height: auto;
+}
+
 .track > * {
     padding-right: 1em;
     padding-left: 1em;
@@ -17,18 +25,6 @@
     width: 2em;
 }
 
-.track-title {
-    width: 3em;
-    line-height: 32px;
-    margin: 0;
-}
-
-.vertical-mode .track-title {
-    display: block;
-    width: auto;
-    text-align: center;
-}
-
 .track-spacer {
     display: inline-block;
     width: 1em;
@@ -42,7 +38,7 @@
 }
 
 .track-main {
-    display: inline-flex;
+    height: 36px;
 }
 
 .vertical-mode .track-main {
@@ -57,7 +53,6 @@
 
 .track {
     width: max-content;
-    margin-bottom: 4px;
 }
 
 .vertical-mode .track {

src/ui/Track/TrackView.tsx

@@ -19,7 +19,7 @@ type EventTypeSubscriptions = typeof EventTypeSubscriptions[number];
 
 export default class TrackView extends Rung implements ISubscriber<EventTypeSubscriptions> {
     private track!: Track;
-    private title = Capsule.new<HTMLHeadingElement | null>(null);
+    private title: HTMLHeadingElement;
     private trackUnitViews: TrackUnitView[] = [];
     private trackUnitViewBlock: HTMLElement | null = null;
     private lastHoveredTrackUnitView: TrackUnitView | null = null;
@@ -29,10 +29,17 @@ export default class TrackView extends Rung implements ISubscriber<EventTypeSubs
 
     constructor(options: TrackUINodeOptions) {
         super(options);
-        this.setBeat(options.track);
+        this.setTrack(options.track);
+        this.title = <h3
+            innerText={this.track.getName()}>
+        </h3> as HTMLHeadingElement;
     }
 
-    setBeat(track: Track | null): void {
+    getTitleNode(): HTMLHeadingElement {
+        return this.title;
+    }
+
+    setTrack(track: Track | null): void {
         if (track) {
             this.track = track;
             this.sub?.unbind();
@@ -46,7 +53,7 @@ export default class TrackView extends Rung implements ISubscriber<EventTypeSubs
     notify(publisher: unknown, event: EventTypeSubscriptions): void {
         switch (event) {
         case TrackEvents.NewName:
-            this.title.val!.innerText = this.track.getName();
+            this.title.innerText = this.track.getName();
             break;
         case TrackEvents.NewTimeSig:
         case TrackEvents.NewBarCount:
@@ -148,11 +155,6 @@ export default class TrackView extends Rung implements ISubscriber<EventTypeSubs
         }
         return <div className={"track"}>
             <div className={"track-main"}>
-                <h3
-                    innerText={this.track.getName()}
-                    saveTo={this.title}
-                    className={"track-title"}>
-                </h3>
                 {this.trackUnitViewBlock}
             </div>
         </div> as HTMLElement;