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

src/ui/Beat/Beat.css

@@ -9,12 +9,8 @@
 
 .vertical-mode .beat {
     align-items: center;
-}
-
-.vertical-mode .beat {
+    overflow: visible;
     height: inherit;
-    overflow-x: hidden;
-    overflow-y: scroll;
 }
 
 .beat-title {
@@ -31,4 +27,46 @@
 }
 
 .beat-track-container {
+    display: inline-block;
+}
+
+.beat-titles-container {
+    display: inline-flex;
+    flex-direction: column;
+}
+
+.vertical-mode .beat-main-container {
+    display: block;
+}
+
+.vertical-mode .beat-titles-container {
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+    overflow: visible;
+}
+
+.beat-main-container {
+    display: flex;
+    white-space: nowrap;
+}
+
+.beat-track-title {
+    height: 36px;
+    line-height: 36px;
+    margin: 0;
+    flex: 1;
+    text-align: right;
+    display: block;
+    white-space: nowrap;
+}
+
+.vertical-mode .beat-track-title {
+    height: auto;
+    transform: rotate(330deg);
+    transform-origin: bottom;
+    width: 36px;
+    display: inline-block;
+    writing-mode: vertical-rl;
+    text-align: right;
 }

src/ui/Beat/BeatView.tsx

@@ -18,6 +18,7 @@ export default class BeatView extends Rung<HTMLElement> implements ISubscriber<E
     private beat: Beat;
     private title: EditableTextFieldView;
     private trackViews: TrackView[] = [];
+    private titles: HTMLHeadingElement[] = [];
     private currentOrientation: "vertical" | "horizontal";
     private subscription: ISubscription;
 
@@ -44,15 +45,22 @@ export default class BeatView extends Rung<HTMLElement> implements ISubscriber<E
     private setupTrackViews(): void {
         const newCount = this.beat.getTrackCount();
         for (let i = 0; i < newCount; i++) {
-            const beat = this.beat.getTrackByIndex(i);
-            if (beat && this.trackViews[i]) {
-                this.trackViews[i].setBeat(beat);
+            const track = this.beat.getTrackByIndex(i);
+            if (track && this.trackViews[i]) {
+                const title = this.trackViews[i].getTitleNode();
+                if (title) {
+                    this.titles[i] = title;
+                }
+                this.trackViews[i].setTrack(track);
             } else {
                 this.trackViews.push(new TrackView({ track: this.beat.getTrackByIndex(i) }));
+                this.titles.push(this.trackViews[i].getTitleNode());
+                this.titles[this.titles.length - 1].classList.add("beat-track-title");
             }
         }
+        this.titles.splice(newCount, this.titles.length - newCount);
         const deadTrackViews = this.trackViews.splice(newCount, this.trackViews.length - newCount);
-        deadTrackViews.forEach(beatView => beatView.setBeat(null));
+        deadTrackViews.forEach(beatView => beatView.setTrack(null));
         if (this.currentOrientation === "horizontal") {
             this.reverseDisplayOrder();
         }
@@ -66,6 +74,7 @@ export default class BeatView extends Rung<HTMLElement> implements ISubscriber<E
     }
 
     private reverseDisplayOrder(): void {
+        this.titles.reverse();
         this.trackViews.reverse();
         this.render().classList.toggle("vertical");
         this.redraw();
@@ -91,7 +100,10 @@ export default class BeatView extends Rung<HTMLElement> implements ISubscriber<E
     build(): HTMLDivElement {
         return <div className={"beat"}>
             <h2 className={"beat-title"}>{this.title}</h2>
-            <div className={"beat-track-container"}>{...this.trackViews}</div>
+            <div className={"beat-main-container"}>
+                <div className={"beat-titles-container"}>{...this.titles}</div>
+                <div className={"beat-track-container"}>{...this.trackViews}</div>
+            </div>
         </div> as HTMLDivElement;
     }
 }