Fix add to page modal

src/src/app/components/add-to-page-modal/add-to-page-modal.component.html

@@ -5,20 +5,21 @@
   </mat-toolbar>
 </div>
 <mat-dialog-content class="content">
-  <mat-selection-list #pageList>
-    <mat-list-option
-      *ngFor="let page of this.pages$ | async"
-      [value]="page"
-      [checkBoxPosition]="before"
-    >
-      {{ page.title }}
-    </mat-list-option>
+  <div class="page-list">
+    <mat-selection-list #pageList>
+      <mat-list-option
+        *ngFor="let page of this.pages$ | async"
+        [value]="page"
+        [checkBoxPosition]="before"
+      >
+        {{ page.title }}
+      </mat-list-option>
 
-    <mat-divider></mat-divider>
-  </mat-selection-list>
-  <br /><br />
+      <mat-divider></mat-divider>
+    </mat-selection-list>
+  </div>
   <form [formGroup]="form" class="add-page-form">
-    <h4>Create New Page</h4>
+    <h4>Or create a New Page</h4>
     <mat-form-field class="page-title">
       <mat-label>Title</mat-label>
       <input formControlName="title" matInput /> </mat-form-field
@@ -32,8 +33,8 @@
       <mat-icon>add</mat-icon>
     </button>
   </form>
+  <div mat-dialog-actions>
+    <button mat-button (click)="save()">Save</button>
+    <button mat-button (click)="cancel()">Cancel</button>
+  </div>
 </mat-dialog-content>
-<div mat-dialog-actions>
-  <button mat-button (click)="save()">Save</button>
-  <button mat-button (click)="cancel()">Cancel</button>
-</div>

src/src/app/components/add-to-page-modal/add-to-page-modal.component.scss

@@ -13,13 +13,25 @@
 
 .content {
   min-width: 60vw;
-  min-height: 50vh;
+  min-height: 80vh;
   max-height: 80vh;
+  display: flex;
+  flex-flow: column;
+  align-content: flex-start;
+  align-items: stretch;
 }
 
 .add-page-form {
   padding-left: 16px;
+  margin-top: 2rem;
 }
 .page-title {
   width: calc(100% - 42px);
 }
+.page-list {
+  overflow-y: auto;
+  height: calc(80vh - 195px);
+}
+.mat-dialog-content {
+  padding: 0 !important;
+}

src/src/app/components/page-edit-modal/page-edit-modal.component.html

@@ -11,8 +11,9 @@
       <input formControlName="title" matInput />
     </mat-form-field>
   </form>
+
+  <div mat-dialog-actions>
+    <button mat-button (click)="save()">Save</button>
+    <button mat-button (click)="cancel()">Cancel</button>
+  </div>
 </mat-dialog-content>
-<div mat-dialog-actions>
-  <button mat-button (click)="save()">Save</button>
-  <button mat-button (click)="cancel()">Cancel</button>
-</div>

src/src/app/components/page-edit-modal/page-edit-modal.component.scss

@@ -18,4 +18,11 @@
 
 .page-title {
   min-width: 50vw;
+  padding-top: 12px;
+}
+
+.mat-dialog-content {
+  min-width: 60vw;
+  min-height: 20vh;
+  max-height: 80vh;
 }

src/src/styles/app.scss

@@ -195,6 +195,10 @@ p {
   margin: 0 0 2px !important;
 }
 
+.mat-dialog-actions {
+  margin-bottom: 0px;
+}
+
 @media screen and (max-width: 500px) {
   .cdk-overlay-pane {
     max-width: 95vw !important;