Layout fixes

src/app/components/team-display/team-display.component.ts

@@ -16,7 +16,11 @@ import {Team} from "../../model/team";
     </app-player-display>
 
     @if (event.doublesEvent && team.player2) {
+      @if (this.inline) {
         /
+      } @else {
+        <br />
+      }
       <app-player-display
         [player]="team.player2"
         [event]="event"
@@ -29,4 +33,5 @@ export class TeamDisplayComponent {
   @Input({ required: true }) team!: Team;
   @Input({ required: true }) event!: Event;
   @Input({ required: true }) tournament!: Tournament;
+  @Input({ required: false }) inline: boolean = true;
 }

src/app/components/tournament-manage/tournament-manage.component.html

@@ -122,32 +122,35 @@
                 <span class="badge text-bg-success">{{ this.activeMatches().length }}</span>
               }
             </ng-template>
-
+            <div class="tab-content-wrapper">
               @if (this.activeMatches().length > 0) {
                 <h6 class="mt-3"></h6>
 
                 @for (activeMatch of this.activeMatches(); track activeMatch.match.id) {
                   <mat-expansion-panel>
                     <mat-expansion-panel-header>
-                    <div class="col-md-2">Baan {{ activeMatch.match.court }}</div>
+                      <div class="col-md-2 d-flex align-items-center">Baan {{ activeMatch.match.court }}</div>
                       <div class="col-md-3">
                         <app-team-display
                           [team]="activeMatch.match.team1"
                           [event]="activeMatch.event"
-                        [tournament]="this.tournament">
+                          [tournament]="this.tournament"
+                          [inline]="false">
                         </app-team-display>
                       </div>
-                    <div class="col-md-1">-</div>
+                      <div class="col-md-1 d-flex align-items-center">-</div>
                       <div class="col-md-3">
                         <app-team-display
                           [team]="activeMatch.match.team2"
                           [event]="activeMatch.event"
-                        [tournament]="this.tournament">
+                          [tournament]="this.tournament"
+                          [inline]="false">
                         </app-team-display>
                       </div>
-                    <div class="col-md-3">{{ activeMatch.group.name }} {{ activeMatch.round.name }}</div>
+                      <div class="col-md-3 d-flex align-items-center">{{ activeMatch.group.name }} {{ activeMatch.round.name }}</div>
                     </mat-expansion-panel-header>
                     <div class="row">
+                      <hr/>
                       <div class="col-md-3">Teller: {{ activeMatch.match.counter | fullName }}</div>
                       <div class="col-md-5"></div>
                       <div class="col-md-2">Starttijd: {{ activeMatch.match.startTime | date: 'HH:mm' }}</div>
@@ -169,6 +172,7 @@
               } @else {
                 <h6 class="mt-3">Geen actieve wedstrijden</h6>
               }
+            </div>
           </mat-tab>
         }
         @if (tournament.status == 'ONGOING' || tournament.status == 'DRAWN') {

src/app/components/tournament-manage/tournament-manage.component.scss

@@ -39,3 +39,6 @@ td.w-fill {
   z-index: 1000 !important;
 }
 
+.tab-content-wrapper {
+  margin: 0 4px 0 4px;
+}