fix: enhance layout and styling in rule and filter components for improved usability

Author: mjabascal10

frontend/src/app/rule-management/app-rule/app-rule.component.html

@@ -1,4 +1,4 @@
-<div class="d-flex flex-column pr-3 pl-3 pt-2 h-100 m-h-0">
+<div class="d-flex flex-column pr-3 pl-3 pt-2 h-100 m-h-0 pb-3">
     <div class="d-flex w-100 justify-content-between align-items-center mb-2">
         <h5 class="card-title mb-0 text-uppercase label-header">Manage Rules</h5>
         <div class="header-elements">

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

@@ -1,4 +1,4 @@
-<div class="card h-100 m-h-0 mb-3">
+<div class="card h-100 m-h-0 mb-0">
     <div class="card-header p-2 w-100">
       <div class="d-flex justify-content-end align-items-center">
         <div class="ml-3">

frontend/src/app/rule-management/share/generic-filter/generic-filter.component.css

@@ -1,4 +1,7 @@
-.filter-value-field-container {
-    max-height: 160px;
-    overflow-y: auto;
+:host {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    height: 100%;
 }

frontend/src/app/rule-management/share/generic-filter/generic-filter.component.html

@@ -1,4 +1,4 @@
-<div class="card p-0 m-0 ">
+<div class="card p-0 m-0 h-100 m-h-0 ">
     <div class="card-header header-elements-sm-inline bg-white card-header-title p-2 pb-1 w-100">
         <span class="font-weight-light span-small-icon">
           {{fieldFilter.label ? fieldFilter.label : fieldFilter.field}}
@@ -18,7 +18,7 @@
              [infiniteScrollDistance]="1"
              [infiniteScrollThrottle]="80"
              [scrollWindow]="false"
-             class="filter-value-field-container"
+             class="filter-value-field-container h-100 m-h-0 overflow-auto"
              infiniteScroll>
             <app-filter [list]="items">
               <ng-template appTemplateSelector let-item let-i>