fix modal scroll issue

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>

src/src/app/components/strongs/modal/strongs-modal.component.scss

@@ -22,3 +22,4 @@ mat-toolbar {
   padding: 0px 16px 0px 16px;
   width: auto;
 }
+

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>

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;
 }
+

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>();
 

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;