fix show song header

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

@@ -7,7 +7,12 @@
       </div>
     }
     @if (!show.published && !fullscreen) {
-      <div class="song">
+      <div
+        class="song"
+        [class.show-text-layout]="!!showText"
+        [class.compact-layout]="!showText"
+        [class.with-drag]="dragHandle && !edit"
+      >
         @if (dragHandle && !edit) {
           <button
             aria-label="Lied verschieben"
@@ -37,19 +42,41 @@
         }
       </div>
       @if (!edit) {
-        <div aria-hidden="true" class="song select">
+        <div
+          aria-hidden="true"
+          class="song select"
+          [class.show-text-layout]="!!showText"
+          [class.compact-layout]="!showText"
+          [class.with-drag]="dragHandle"
+        >
           @if (dragHandle) {
             <span class="drag-handle-placeholder"></span>
           }
-          <span>            <mat-form-field class="keys-select">
+          @if (!showText) {
+            <span class="keys">
+              <mat-form-field class="keys-select">
                 <mat-select #option [formControl]="keyFormControl" tabIndex="-1">
                   @for (key of keys; track key) {
                     <mat-option [value]="key">{{ key }}</mat-option>
                   }
                 </mat-select>
-            </mat-form-field></span>
+              </mat-form-field>
-          <span></span>
+            </span>
-          <span></span>
+            <span class="title"></span>
+          } @else {
+            <span class="title"></span>
+            <span class="keys">
+              <mat-form-field class="keys-select">
+                <mat-select #option [formControl]="keyFormControl" tabIndex="-1">
+                  @for (key of keys; track key) {
+                    <mat-option [value]="key">{{ key }}</mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            </span>
+          }
+          <span class="btn-edit"></span>
+          <span class="btn-delete"></span>
         </div>
       }
     }

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

@@ -5,11 +5,6 @@
   }
 
   display: grid;
-  grid-template-columns: 24px auto 70px 25px 25px;
-  @media screen and (max-width: 860px) {
-    grid-template-columns: 24px auto 70px 45px 45px;
-  }
-  grid-template-areas: "drag title keys edit delete";
 
   & > * {
     display: flex;
@@ -17,6 +12,42 @@
   }
 
   overflow: hidden;
+
+  &.compact-layout {
+    grid-template-columns: 70px auto 25px 25px;
+    grid-template-areas: "keys title edit delete";
+
+    @media screen and (max-width: 860px) {
+      grid-template-columns: 50px auto 45px 45px;
+    }
+
+    &.with-drag {
+      grid-template-columns: 24px 50px 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;
+      }
+    }
+  }
+
+  &.show-text-layout {
+    grid-template-columns: auto 50px 25px 25px;
+    grid-template-areas: "title keys edit delete";
+
+    @media screen and (max-width: 860px) {
+      grid-template-columns: auto 50px 45px 45px;
+    }
+
+    &.with-drag {
+      grid-template-columns: 24px auto 50px 25px 25px;
+      grid-template-areas: "drag title keys edit delete";
+
+      @media screen and (max-width: 860px) {
+        grid-template-columns: 24px auto 50px 45px 45px;
+      }
+    }
+  }
 }
 
 .drag-handle,
@@ -73,6 +104,7 @@
   height: 0;
   overflow: hidden;
   line-height: 0;
+  min-width: 80px;
 }
 
 .keys {