Changed how Filters page looks like.

src/app/tts-filters/filter-item-edit/filter-item-edit.component.html

@@ -1,6 +1,6 @@
 <mat-card>
   <mat-card-content>
-    <h2 mat-dialog-title>TTS Filter</h2>
+    <h3 mat-dialog-title>TTS Filter</h3>
     <mat-dialog-content>
       <form [formGroup]="forms">
         <div>

src/app/tts-filters/filter-list/filter-list.component.scss

@@ -6,7 +6,6 @@ ul.data {
   margin: 0;
   padding: 0;
   overflow: auto;
-  height: calc(100vh - 60px);
 
   > li {
     display: block;

src/app/tts-filters/filters/filters.component.html

@@ -2,12 +2,12 @@
   <article>
     <h3>Filters</h3>
     <div>
-      <button mat-fab aria-label="Add a filter" (click)="openDialog()">
-        <mat-icon>add</mat-icon>
+      <button mat-button class="add" aria-label="Add a filter" (click)="openDialog()">
+        <mat-icon>add</mat-icon>Add TTS Filter
       </button>
     </div>
   </article>
-  <div>
+  <div class="grow">
     <tts-filter-list
       [filters]="items" />
   </div>

src/app/tts-filters/filters/filters.component.scss

@@ -1,13 +1,17 @@
 main {
   background-color: #fafafa;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 }
 
 article {
-    display: flex;
-    justify-content: center;
-    gap: 10em;
+  justify-self: center;
+  text-align: center;
+  margin-bottom: 2em;
 }
 
-button {
-  transform: scale(0.7);
+.grow {
+  flex-grow: 1;
+  overflow: auto;
 }