fix(#9292): add scroll to training cards content (#9493)

medic · Oct 7, 2024 · be16f54 · be16f54
1 parent 2ac8970
commit be16f54
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/webapp/src/css/modal.less b/webapp/src/css/modal.less
@@ -65,6 +65,15 @@ mm-modal-layout {
       background: none;
     }
 
+    .modal-body {
+      overflow: hidden;
+      margin-bottom: 11px;
+    }
+
+    .modal-footer {
+      padding: 0;
+    }
+
     .enketo {
       .or h2,
       .or h3,
@@ -79,15 +88,22 @@ mm-modal-layout {
         padding-left: 0;
         padding-right: 0;
       }
+
       .or-appearance-summary {
         .or-appearance-h1:not(.disabled) {
           padding-left: 5px;
           padding-right: 5px;
         }
+
         .or-appearance-li:not(.disabled):before {
           left: -10px;
         }
       }
+
+      form {
+        max-height: 65vh;
+        overflow-y: auto;
+      }
     }
 
     .form-no-title #form-title {
@@ -109,9 +125,9 @@ mm-modal-layout {
 
 @media (max-width: @media-mobile) {
   mm-modal-layout {
-    .enketo {
-      #form-title {
-        display: inherit;
+    .enketo-modal .enketo {
+      form {
+        max-height: 60vh;
       }
 
       .form-footer {

diff --git a/webapp/src/ts/services/modal.service.ts b/webapp/src/ts/services/modal.service.ts
@@ -37,7 +37,7 @@ export class ModalService {
     return this.matDialog.open(component, {
       autoFocus: false,
       disableClose: true,
-      minWidth: isMobile ? '90vw' : '400px', // Give maximum space to date picker's calendar when in mobile.
+      minWidth: isMobile ? '90vw' : '340px', // Give maximum space to date picker's calendar when in mobile.
       width: '600px',
       maxWidth: '90vw',
       minHeight: '100px',