From ce67fb4a34317e94e3e5b07da3d508fc6500715b Mon Sep 17 00:00:00 2001
From: benjamin <smuddyx@gmail.com>
Date: Wed, 11 Mar 2026 17:34:30 +0100
Subject: [PATCH] fix show song header

---
 src/app/modules/shows/show/show.component.html |  1 +
 src/app/modules/shows/show/show.component.ts   | 14 ++++++++++++++
 .../shows/show/song/song.component.less        | 18 +++++++++---------
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/app/modules/shows/show/show.component.html b/src/app/modules/shows/show/show.component.html
index ce6deee..5366890 100644
--- a/src/app/modules/shows/show/show.component.html
+++ b/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">
diff --git a/src/app/modules/shows/show/show.component.ts b/src/app/modules/shows/show/show.component.ts
index 6714cd1..792b063 100644
--- a/src/app/modules/shows/show/show.component.ts
+++ b/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 {
diff --git a/src/app/modules/shows/show/song/song.component.less b/src/app/modules/shows/show/song/song.component.less
index 3f7d2ba..4ae4872 100644
--- a/src/app/modules/shows/show/song/song.component.less
+++ b/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 {