From 28930da115e6c335247f1d24cbef3a2bf3b7bfe2 Mon Sep 17 00:00:00 2001
From: "jason.wall" <jason.wall@vaeit.com>
Date: Wed, 22 Dec 2021 12:02:34 -0500
Subject: [PATCH 1/3] fix modal scroll issue

---
 .../strongs/card/strongs-card.component.html        |  1 +
 .../strongs/modal/strongs-modal.component.scss      |  1 +
 .../app/components/strongs/strongs.component.html   |  4 +++-
 .../app/components/strongs/strongs.component.scss   | 13 +++++++++++--
 src/src/app/components/strongs/strongs.component.ts |  3 +++
 src/src/styles/app.scss                             |  1 +
 6 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/src/app/components/strongs/card/strongs-card.component.html b/src/src/app/components/strongs/card/strongs-card.component.html
index fa2b4025..22bdb4f6 100644
--- a/src/src/app/components/strongs/card/strongs-card.component.html
+++ b/src/src/app/components/strongs/card/strongs-card.component.html
@@ -15,6 +15,7 @@
 <div class="card-content" *ngIf="cardItem" #strongs>
   <app-strongs
     [data]="cardItem.data"
+    [isCard]="true"
     (onOpenPassage)="openPassage($event)"
     (onOpenStrongs)="openStrongs($event)"
   ></app-strongs>
diff --git a/src/src/app/components/strongs/modal/strongs-modal.component.scss b/src/src/app/components/strongs/modal/strongs-modal.component.scss
index 44212eed..33772233 100644
--- a/src/src/app/components/strongs/modal/strongs-modal.component.scss
+++ b/src/src/app/components/strongs/modal/strongs-modal.component.scss
@@ -22,3 +22,4 @@ mat-toolbar {
   padding: 0px 16px 0px 16px;
   width: auto;
 }
+
diff --git a/src/src/app/components/strongs/strongs.component.html b/src/src/app/components/strongs/strongs.component.html
index a773bf1f..c6ba2a24 100644
--- a/src/src/app/components/strongs/strongs.component.html
+++ b/src/src/app/components/strongs/strongs.component.html
@@ -1,4 +1,5 @@
 <ng-container *ngIf="data">
+  <div class="strongs-container">
   <div class="strongs-def">
     <p>
       <b>{{ data.def.tr }}</b>
@@ -25,7 +26,7 @@
     <h2>Cross References</h2>
     &nbsp;&nbsp;&nbsp;Translated as
     {{ data.crossrefs.ss.length }} word(s)
-    <div class="strongs-crossrefs">
+    <div [ngClass]="isCard ? 'card-strongs-crossrefs' : ''">
       <dl>
         <dd *ngFor="let wrd of data.crossrefs.ss">
           <strong>{{ wrd.w }}, {{ wrd.rs.length }}</strong
@@ -38,4 +39,5 @@
       </dl>
     </div>
   </div>
+</div>
 </ng-container>
diff --git a/src/src/app/components/strongs/strongs.component.scss b/src/src/app/components/strongs/strongs.component.scss
index cfe3ca18..5f31240e 100644
--- a/src/src/app/components/strongs/strongs.component.scss
+++ b/src/src/app/components/strongs/strongs.component.scss
@@ -1,4 +1,13 @@
-.strongs-crossrefs {
-  max-height: 20em;
+
+.strongs-container {
+ display: flex;
+ flex-flow: column;
+ align-items: stretch;
+}
+
+
+.card-strongs-crossrefs {
+  max-height: 20rem;
   overflow-y: auto;
 }
+
diff --git a/src/src/app/components/strongs/strongs.component.ts b/src/src/app/components/strongs/strongs.component.ts
index d8f7fe05..788081a2 100644
--- a/src/src/app/components/strongs/strongs.component.ts
+++ b/src/src/app/components/strongs/strongs.component.ts
@@ -12,6 +12,9 @@ export class StrongsComponent {
   @Input()
   data: StrongsResult;
 
+  @Input()
+  isCard = false;
+
   @Output()
   onOpenPassage = new EventEmitter<string>();
 
diff --git a/src/src/styles/app.scss b/src/src/styles/app.scss
index 13bb0bd7..bb2ead0f 100644
--- a/src/src/styles/app.scss
+++ b/src/src/styles/app.scss
@@ -185,6 +185,7 @@ p {
 }
 .mat-dialog-container {
   padding: 0 !important;
+  overflow: hidden !important;
 }
 .mat-dialog-content {
   padding: 0 12px !important;

From f1213622f175279b5451d9b3ef3269c8330c853c Mon Sep 17 00:00:00 2001
From: "jason.wall" <jason.wall@vaeit.com>
Date: Wed, 22 Dec 2021 12:48:01 -0500
Subject: [PATCH 2/3] Fix add to page modal

---
 .../add-to-page-modal.component.html          | 33 ++++++++++---------
 .../add-to-page-modal.component.scss          | 14 +++++++-
 .../page-edit-modal.component.html            |  9 ++---
 .../page-edit-modal.component.scss            |  7 ++++
 src/src/styles/app.scss                       |  4 +++
 5 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/src/app/components/add-to-page-modal/add-to-page-modal.component.html b/src/src/app/components/add-to-page-modal/add-to-page-modal.component.html
index 4d180f7b..2708272e 100644
--- a/src/src/app/components/add-to-page-modal/add-to-page-modal.component.html
+++ b/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>
diff --git a/src/src/app/components/add-to-page-modal/add-to-page-modal.component.scss b/src/src/app/components/add-to-page-modal/add-to-page-modal.component.scss
index 0cbe52ca..d834350c 100644
--- a/src/src/app/components/add-to-page-modal/add-to-page-modal.component.scss
+++ b/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;
+}
diff --git a/src/src/app/components/page-edit-modal/page-edit-modal.component.html b/src/src/app/components/page-edit-modal/page-edit-modal.component.html
index 2b374b7b..38097e68 100644
--- a/src/src/app/components/page-edit-modal/page-edit-modal.component.html
+++ b/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>
diff --git a/src/src/app/components/page-edit-modal/page-edit-modal.component.scss b/src/src/app/components/page-edit-modal/page-edit-modal.component.scss
index 16a44874..6dc670f9 100644
--- a/src/src/app/components/page-edit-modal/page-edit-modal.component.scss
+++ b/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;
 }
diff --git a/src/src/styles/app.scss b/src/src/styles/app.scss
index bb2ead0f..ac6f5de9 100644
--- a/src/src/styles/app.scss
+++ b/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;

From 18ef5a79489c72a0ab921008d4fbd260a0a93cd0 Mon Sep 17 00:00:00 2001
From: "jason.wall" <jason.wall@vaeit.com>
Date: Wed, 22 Dec 2021 14:22:02 -0500
Subject: [PATCH 3/3] right align the form buttons

---
 src/src/styles/app.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/src/styles/app.scss b/src/src/styles/app.scss
index ac6f5de9..3036e6fb 100644
--- a/src/src/styles/app.scss
+++ b/src/src/styles/app.scss
@@ -197,6 +197,7 @@ p {
 
 .mat-dialog-actions {
   margin-bottom: 0px;
+  justify-content: end;
 }
 
 @media screen and (max-width: 500px) {