From 0fd693aa4237ff6a31ce57126a0bee7dd6d37ad7 Mon Sep 17 00:00:00 2001
From: Michel ten Voorde <michel@tenvoorde.org>
Date: Sat, 4 Oct 2025 22:40:51 +0200
Subject: [PATCH] Layout fixes

---
 .../team-display/team-display.component.ts    |  7 +-
 .../tournament-manage.component.html          | 92 ++++++++++---------
 .../tournament-manage.component.scss          |  3 +
 3 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/src/app/components/team-display/team-display.component.ts b/src/app/components/team-display/team-display.component.ts
index 2a9ce7f..5b3757f 100644
--- a/src/app/components/team-display/team-display.component.ts
+++ b/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;
 }
diff --git a/src/app/components/tournament-manage/tournament-manage.component.html b/src/app/components/tournament-manage/tournament-manage.component.html
index 0c723a6..7469da0 100644
--- a/src/app/components/tournament-manage/tournament-manage.component.html
+++ b/src/app/components/tournament-manage/tournament-manage.component.html
@@ -122,53 +122,57 @@
                 <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>
 
-            @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-3">
-                      <app-team-display
-                        [team]="activeMatch.match.team1"
-                        [event]="activeMatch.event"
-                        [tournament]="this.tournament">
-                      </app-team-display>
+                @for (activeMatch of this.activeMatches(); track activeMatch.match.id) {
+                  <mat-expansion-panel>
+                    <mat-expansion-panel-header>
+                      <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"
+                          [inline]="false">
+                        </app-team-display>
+                      </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"
+                          [inline]="false">
+                        </app-team-display>
+                      </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>
+                      <div class="col-md-2">Duur: {{ getDuration(activeMatch.match.startTime) | date: 'mm:ss' }}</div>
                     </div>
-                    <div class="col-md-1">-</div>
-                    <div class="col-md-3">
-                      <app-team-display
-                        [team]="activeMatch.match.team2"
-                        [event]="activeMatch.event"
-                        [tournament]="this.tournament">
-                      </app-team-display>
-                    </div>
-                    <div class="col-md-3">{{ activeMatch.group.name }} {{ activeMatch.round.name }}</div>
-                  </mat-expansion-panel-header>
-                  <div class="row">
-                    <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>
-                    <div class="col-md-2">Duur: {{ getDuration(activeMatch.match.startTime) | date: 'mm:ss' }}</div>
-                  </div>
-                  <mat-action-row>
-                    <button class="align-baseline" mat-button (click)="editResult(activeMatch.match, activeMatch.group, activeMatch.round)">
-                      <mat-icon>edit</mat-icon>
-                      Uitslag invoeren
-                    </button>
-                    <button mat-button (click)="stopMatch(activeMatch.match)">
-                      <mat-icon>stop</mat-icon>
-                      Wedstrijd stoppen
-                    </button>
-                  </mat-action-row>
-                </mat-expansion-panel>
-                <br>
+                    <mat-action-row>
+                      <button class="align-baseline" mat-button (click)="editResult(activeMatch.match, activeMatch.group, activeMatch.round)">
+                        <mat-icon>edit</mat-icon>
+                        Uitslag invoeren
+                      </button>
+                      <button mat-button (click)="stopMatch(activeMatch.match)">
+                        <mat-icon>stop</mat-icon>
+                        Wedstrijd stoppen
+                      </button>
+                    </mat-action-row>
+                  </mat-expansion-panel>
+                  <br>
+                }
+              } @else {
+                <h6 class="mt-3">Geen actieve wedstrijden</h6>
               }
-            } @else {
-              <h6 class="mt-3">Geen actieve wedstrijden</h6>
-            }
+            </div>
           </mat-tab>
         }
         @if (tournament.status == 'ONGOING' || tournament.status == 'DRAWN') {
diff --git a/src/app/components/tournament-manage/tournament-manage.component.scss b/src/app/components/tournament-manage/tournament-manage.component.scss
index d4e93ab..779e455 100644
--- a/src/app/components/tournament-manage/tournament-manage.component.scss
+++ b/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;
+}