Scroll to top when switching setting tabs

src/app/components/home.component.html

@@ -206,6 +206,7 @@
     *ngIf="settingsModalOpen"
     class="settings-modal"
     @modalAnimation
+    #settingsModal
   >
 
     <!-- fade out & close button -->
@@ -231,6 +232,7 @@
       (increaseZoomLevel)="increaseZoomLevel()"
       (openOnlineHelp)="openOnlineHelp()"
       (resetZoomLevel)="resetZoomLevel()"
+      (scrollSettingsToTop)="scrollSettingsToTop()"
       (toggleButton)="toggleButton($any($event))"
       (toggleHideButton)="toggleHideButton($event)"
 

src/app/components/home.component.ts

@@ -109,6 +109,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
   @ViewChild('fuzzySearch', { static: false }) fuzzySearch: ElementRef;
   @ViewChild('magicSearch', { static: false }) magicSearch: ElementRef;
   @ViewChild('searchRef',   { static: false }) searchRef:   ElementRef;
+  @ViewChild('settingsModal', { static: false }) settingsModal: ElementRef;
 
   @ViewChild(SortOrderComponent) sortOrderRef: SortOrderComponent;
 
@@ -2412,4 +2413,13 @@ export class HomeComponent implements OnInit, AfterViewInit {
     this.serverDetailsBehaviorSubject.next(undefined);
   }
 
+  /**
+   * Scroll the settings modal to the top
+   */
+  scrollSettingsToTop(): void {
+    if (this.settingsModal) {
+      this.settingsModal.nativeElement.scrollTop = 0;
+    }
+  }
+
 }

src/app/components/meta/meta.component.scss

@@ -7,7 +7,6 @@
 .meta {
   box-sizing: border-box;
   display: inline-block;
-  height: 190px;
   overflow: hidden; // will hide tags that don't fit in 2 lines
   padding: 0 0 0 20px;
   vertical-align: top;
@@ -107,9 +106,7 @@
   @include scrollBar;
   box-sizing: border-box;
   display: block;
-  height: 60px;
   overflow-y: auto;
-  padding-bottom: 2px;
 }
 
 .times-played {

src/app/components/settings/settings.component.ts

@@ -1,5 +1,5 @@
-import type { OnInit } from '@angular/core';
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import type { OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
 
 import { TranslateService } from '@ngx-translate/core';
 
@@ -19,7 +19,7 @@ import { SettingsMetaGroup, SettingsMetaGroupLabels } from '../../common/setting
     './settings.component.scss'
   ]
 })
-export class SettingsComponent implements OnInit {
+export class SettingsComponent implements OnInit, OnChanges {
 
   @Output() changeLanguage = new EventEmitter<string>();
   @Output() checkForNewVersion = new EventEmitter<any>();
@@ -31,6 +31,7 @@ export class SettingsComponent implements OnInit {
   @Output() resetZoomLevel = new EventEmitter<any>();
   @Output() toggleButton = new EventEmitter<string>();
   @Output() toggleHideButton = new EventEmitter<string>();
+  @Output() scrollSettingsToTop = new EventEmitter<void>();
 
   @Input() appState;
   @Input() demo;
@@ -39,6 +40,8 @@ export class SettingsComponent implements OnInit {
   @Input() settingsButtons: SettingsButtonsType;
   @Input() versionNumber;
 
+  @ViewChild('settingsModal') settingsModal: ElementRef;
+
   additionalInput = '';
   editAdditional = false;
   settingsMetaGroup = SettingsMetaGroup;
@@ -54,6 +57,12 @@ export class SettingsComponent implements OnInit {
     this.additionalInput = this.appState.addtionalExtensions;
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.settingTabToShow) {
+      this.scrollSettingsToTop.emit();
+    }
+  }
+
   editAdditionalExtensions() {
     this.editAdditional = !this.editAdditional;
     this.additionalInput = this.appState.addtionalExtensions;

src/app/components/sheet/sheet.component.scss

@@ -49,7 +49,6 @@
 .meta-container {
   box-sizing: border-box;
   display: inline-block;
-  height: 180px;
   vertical-align: top;
   width: 100%;
 }