fix show song header

src/app/modules/shows/show/show.component.html

@@ -31,6 +31,7 @@
       @if (showSongs && !useSwiper) {
         <div (cdkDropListDropped)="drop($event, show)"
           [cdkDropListDisabled]="show.published || showText"
+          [style.--song-key-column-width]="getSongKeyColumnWidth(show)"
           [style.font-size]="textSize + 'em'"
           cdkDropList
           class="song-list">

src/app/modules/shows/show/show.component.ts

@@ -255,6 +255,20 @@ export class ShowComponent implements OnInit, OnDestroy {
     const song = showSongs[i + 1];
     return song?.title ?? '';
   }
+
+  public getSongKeyColumnWidth(show: Show): string {
+    const labels = this.orderedShowSongs(show).map(song => {
+      if (song.keyOriginal && song.keyOriginal !== song.key) {
+        return `${song.keyOriginal} -> ${song.key}`;
+      }
+
+      return song.key ?? '';
+    });
+
+    const longestLabelLength = labels.reduce((max, label) => Math.max(max, label.length), 0);
+    const widthInCh = Math.max(3, longestLabelLength);
+    return `${widthInCh}ch`;
+  }
 }
 
 export interface Swiper {

src/app/modules/shows/show/song/song.component.less

@@ -14,37 +14,37 @@
   overflow: hidden;
 
   &.compact-layout {
-    grid-template-columns: 70px auto 25px 25px;
+    grid-template-columns: var(--song-key-column-width, 30px) auto 25px 25px;
     grid-template-areas: "keys title edit delete";
 
     @media screen and (max-width: 860px) {
-      grid-template-columns: 50px auto 45px 45px;
+      grid-template-columns: var(--song-key-column-width, 30px) auto 45px 45px;
     }
 
     &.with-drag {
-      grid-template-columns: 24px 50px auto 25px 25px;
+      grid-template-columns: 24px var(--song-key-column-width, 30px) auto 25px 25px;
       grid-template-areas: "drag keys title edit delete";
 
       @media screen and (max-width: 860px) {
-        grid-template-columns: 24px 50px auto 45px 45px;
+        grid-template-columns: 24px var(--song-key-column-width, 30px) auto 45px 45px;
       }
     }
   }
 
   &.show-text-layout {
-    grid-template-columns: auto 50px 25px 25px;
+    grid-template-columns: auto var(--song-key-column-width, 30px) 25px 25px;
     grid-template-areas: "title keys edit delete";
 
     @media screen and (max-width: 860px) {
-      grid-template-columns: auto 50px 45px 45px;
+      grid-template-columns: auto var(--song-key-column-width, 30px) 45px 45px;
     }
 
     &.with-drag {
-      grid-template-columns: 24px auto 50px 25px 25px;
+      grid-template-columns: 24px auto var(--song-key-column-width, 30px) 25px 25px;
       grid-template-areas: "drag title keys edit delete";
 
       @media screen and (max-width: 860px) {
-        grid-template-columns: 24px auto 50px 45px 45px;
+        grid-template-columns: 24px auto var(--song-key-column-width, 30px) 45px 45px;
       }
     }
   }
@@ -104,7 +104,7 @@
   height: 0;
   overflow: hidden;
   line-height: 0;
-  min-width: 80px;
+  min-width: max(100px, var(--song-key-column-width, 30px));
 }
 
 .keys {