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

index.html

@@ -4,7 +4,7 @@
     <meta charset='utf-8'>
     <meta name='viewport' content='width=device-width,initial-scale=1'>
 
-    <title>Drum Slayer Pro</title>
+    <title>Drum Slayer</title>
 
     <link rel='icon' type='image/png' href='./favicon.png'>
 </head>

src/ui/Beat/Beat.css

@@ -9,12 +9,8 @@
 
 .vertical-mode .beat {
     align-items: center;
-}
+    overflow: visible;
-
-.vertical-mode .beat {
     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);
+            const track = this.beat.getTrackByIndex(i);
-            if (beat && this.trackViews[i]) {
+            if (track && this.trackViews[i]) {
-                this.trackViews[i].setBeat(beat);
+                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;
     }
 }

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;