feat(#115): auto scroll to current matches

frontend/src/app/components/qualification-matches/qualification-matches.component.html

@@ -1,5 +1,6 @@
 @for (match of sortedQualificationMatches; track match.id) {
   <app-qualification-match-line
+    #matchLineElement
     [match]="match"
     (onMatchUpdate)="onMatchUpdate.emit($event)"
     (markTeamDrinksPickedUp)="triggerMarkTeamDrinksPickedUp(match, $event)"

frontend/src/app/components/qualification-matches/qualification-matches.component.ts

@@ -1,4 +1,13 @@
-import { Component, input, output } from '@angular/core';
+import {
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  input,
+  output,
+  QueryList,
+  viewChildren,
+} from '@angular/core';
 import {
   TeamDto,
   TournamentQualificationMatchDto,
@@ -20,10 +29,29 @@ export class QualificationMatchesComponent {
   tournamentId = input.required<number>();
   viewOnly = input<boolean>(false);
   teamDtos = input<Map<number, TeamDto>>(new Map());
+  renderedRows = viewChildren<QueryList<ElementRef<HTMLTableRowElement>>>(
+    'matchLineElement',
+    // @ts-ignore - this is a bug in the typescript definitions
+    { read: ElementRef },
+  );
   generateQualificationMatches = output();
   onMatchUpdate = output<TournamentQualificationMatchDto>();
   markTeamDrinksPickedUp = output<MarkTeamDrinksPickedUpDto>();
 
+  indexOfFirstPlayingMatch = computed(() => {
+    return this.sortedQualificationMatches.findIndex(m => m.startTime && !m.endTime);
+  });
+
+  scrollToRow = effect(() => {
+    if (this.viewOnly() && this.renderedRows()?.length) {
+      const index = Math.max(this.indexOfFirstPlayingMatch() - 4, 0);
+      const row = (this.renderedRows() as ElementRef[])[index].nativeElement;
+      if (row) {
+        row.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }
+  });
+
   triggerMarkTeamDrinksPickedUp(
     match: TournamentQualificationMatchDto,
     participantDto: TournamentQualificationMatchParticipantDto,

frontend/src/app/components/tournament/tournament-public-view/tournament-public-view.component.scss

@@ -27,5 +27,5 @@
   margin-left: var(--spacing2);
   margin-bottom: var(--spacing2);
   margin-top: var(--spacing2);
-  overflow-y: auto;
+  overflow-y: hidden;
 }