optimize shadows & paddings

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

@@ -10,40 +10,47 @@
       <div class="song">
         <span class="title">{{ iSong.title }}</span>
         @if (!edit) {
-          <span class="keys">
-            @if (iSong.keyOriginal !== iSong.key) {
-              <span>{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
-              }<span
-            (click)="openKeySelect()">{{ iSong.key }}</span>
-            @if (keys) {
-              <mat-form-field (click)="option.open()" class="transpose">
-                <mat-select #option [formControl]="keyFormControl">
-                  @for (key of keys; track key) {
-                    <mat-option [value]="key">{{ key }}</mat-option>
-                  }
-                </mat-select>
-              </mat-form-field>
-            }
-          </span>
+          <div class="keys-container">
+            <div (click)="openKeySelect()" class="keys">
+              @if (iSong.keyOriginal !== iSong.key) {
+                <span>{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
+              }
+              <span>{{ iSong.key }}</span>
+            </div>
+          </div>
         }
         @if (!edit) {
           <app-menu-button (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon"
-          matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
+                           matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
         }
         @if (!edit) {
           <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon"
-          matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
+                           matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
         }
       </div>
+      @if (!edit) {
+        <div aria-hidden="true" class="song select">
+          <span></span>
+          <span>            <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></span>
+          <span></span>
+        </div>
+      }
     }
     @if (edit) {
       <mat-form-field appearance="outline">
         <mat-label>Songtext</mat-label>
         <textarea [cdkTextareaAutosize]="true"
-          [formControl]="editSongControl"
-          class="edit"
-          matInput
-          matTooltip="Tonart ändern"
+                  [formControl]="editSongControl"
+                  class="edit"
+                  matInput
+                  matTooltip="Tonart ändern"
         ></textarea>
       </mat-form-field>
     }
@@ -56,7 +63,7 @@
         <app-button (click)="onDiscard()" [icon]="faEraser">Verwerfen</app-button>
       </app-button-row>
     }
-    @if (!edit && (showText )) {
+    @if (!edit && (showText)) {
       <app-song-text
         (chordModeChanged)="onChordModeChanged($event)"
         [chordMode]="iSong.chordMode"

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

@@ -1,6 +1,9 @@
 
 .song {
-  min-height: 28px;
+  &:not(.select) {
+    min-height: 28px;
+  }
+
   display: grid;
   grid-template-columns: auto 70px 25px 25px;
   @media screen and (max-width: 860px) {
@@ -16,10 +19,25 @@
   overflow: hidden;
 }
 
+.keys-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.keys-select {
+  height: 0;
+  overflow: hidden;
+  line-height: 0;
+}
+
 .keys {
+  display: flex;
+  align-items: center;
   position: relative;
   margin-right: 10px;
   cursor: pointer;
+  flex-grow: 0;
+  height: 100%;
 
   &:hover {
     color: var(--color-primary);