refactor(modals): adjust modal heights and improve layout for better responsiveness

Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>

Author: mjabascal10

frontend/src/app/rule-management/app-rule/components/add-rule/add-rule.component.scss

@@ -135,3 +135,18 @@ fieldset {
   background-color: $success-color !important;
 }
 
+.form-body {
+  min-height: 725px;
+  max-height: 725px;
+  overflow-y: auto!important;
+  overflow-x: hidden!important;
+  flex-grow: 1;
+}
+
+@media screen and (max-height: 867px) {
+  .form-body {
+    min-height: 500px;
+    max-height: 500px;
+  }
+}
+

frontend/src/app/rule-management/app-rule/components/import-rules/import-rule.component.scss

@@ -65,7 +65,7 @@ fieldset {
 
 .form-body {
   min-height: 590px;
-  max-height: 700px;
+  max-height: 615px;
   overflow-y: auto!important;
   overflow-x: hidden!important;
   flex-grow: 1;
@@ -142,7 +142,14 @@ fieldset {
 .step-success {
   background-color: $success-color !important;
 }
-.loader{
-  top:0%;
-  left:0%;
+.loader {
+  top: 0;
+  left: 0;
+}
+
+@media screen and (max-height: 867px) {
+  .form-body {
+    min-height: 500px;
+    max-height: 500px;
+  }
 }

frontend/src/app/rule-management/app-rule/components/rule-list/rule-list.component.ts

@@ -105,7 +105,7 @@ export class RuleListComponent implements OnInit, OnDestroy {
     const modalRef = this.modalService.open(mode === 'ADD' ? AddRuleComponent : ImportRuleComponent, {
       size: 'lg',
       centered: true,
-      windowClass: 'add-rule-modal',
+      windowClass: mode === 'ADD' ? 'add-rule-modal' : 'import-rule-modal',
     });
 
     modalRef.componentInstance.mode = mode;

frontend/src/app/shared/components/utm/util/utm-file-upload/utm-file-upload.component.html

@@ -10,7 +10,7 @@ <h6 class="font-weight-light text-blue-800">Drag file or click here to select {{
   </small>
 </div>
 
-<div style="height: 250px" class="dropzone-items wm-200px overflow-auto">
+<div  class="dropzone-items wm-200px overflow-auto">
   <div style="background: #f8f8f8" *ngFor="let file of files; let i = index"
        class="p-2 border rounded mb-2 d-flex flex-column">
 

frontend/src/app/shared/components/utm/util/utm-file-upload/utm-file-upload.component.scss

@@ -0,0 +1,9 @@
+.dropzone-items {
+  height: 250px;
+}
+
+@media screen and (max-height: 967px) {
+  .dropzone-items {
+    height: 120px;
+  }
+}

frontend/src/styles.scss

@@ -635,9 +635,16 @@ app-header {
   border-radius: 0;
 }
 
+.import-rule-modal {
+  .modal-content {
+    max-height: 750px !important;
+    overflow-y: hidden;
+  }
+}
+
 .add-rule-modal {
   .modal-content {
-    max-height: 900px !important;
+    max-height: 850px !important;
     overflow-y: hidden;
   }
 }
@@ -1434,6 +1441,21 @@ app-utm-items-per-page {
   }
 }
 
+@media screen and (max-height: 867px) {
+  .import-rule-modal {
+    .modal-content {
+      max-height: 650px !important;
+    }
+  }
+
+  .add-rule-modal {
+    .modal-content {
+      max-height: 650px !important;
+    }
+  }
+}
+
+