Fix scrolling behaviour of filter dialog

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/components/file-search/file-search.component.ts

@@ -148,6 +148,7 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
     const filterEntries = this.filters.map(f => f.clone());
     const filterDialog = this.dialog.open(FilterDialogComponent, {
       minWidth: "25vw",
+      height: "80vh",
       data: {
         filterEntries,
         availableTags: this.availableTags,

mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.html

@@ -1,13 +1,15 @@
 <h1 mat-dialog-title>Filters</h1>
-<div mat-dialog-content>
+<div mat-dialog-content fxLayout="column" class="filter-dialog-content">
-  <mat-list>
+  <div fxFlex fxFlexFill class="filter-dialog-list">
-    <mat-list-item class="filter-list-item" *ngFor="let expression of filters" [class.selected]="expression.selected">
+    <mat-list>
-      <app-tag-filter-list-item (querySelect)="this.addToSelection($event)" (queryUnselect)="this.removeFromSelection($event)" (removeClicked)="this.removeFilter($event)"
+      <mat-list-item class="filter-list-item" *ngFor="let expression of filters" [class.selected]="expression.selected">
-                                (contextmenu)="contextMenu.onContextMenu($event)" [expression]="expression"></app-tag-filter-list-item>
+        <app-tag-filter-list-item (querySelect)="this.addToSelection($event)" (queryUnselect)="this.removeFromSelection($event)" (removeClicked)="this.removeFilter($event)"
-    </mat-list-item>
+                                  (contextmenu)="contextMenu.onContextMenu($event)" [expression]="expression"></app-tag-filter-list-item>
-  </mat-list>
+      </mat-list-item>
-  <mat-divider></mat-divider>
+    </mat-list>
-  <app-tag-input class="tag-input" [allowNegation]="true" [availableTags]="this.availableTags"
+  </div>
+  <mat-divider fxFlex="10px"></mat-divider>
+  <app-tag-input fxFlex="5em" class="tag-input" [allowNegation]="true" [availableTags]="this.availableTags"
                  (tagAdded)="this.addFilter($event)"></app-tag-input>
 </div>
 <div class="dialog-actions" mat-dialog-actions>

mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.scss

@@ -26,3 +26,16 @@ app-tag-filter-list-item {
 .selected {
   background-color: #5c5c5c;
 }
+
+.filter-dialog-content {
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+
+.filter-dialog-list {
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+}