fix: enhance compliance report view

frontend/src/app/compliance/shared/components/utm-cp-section/utm-cp-section.component.css

@@ -35,12 +35,12 @@
   display: grid;
   grid-template-rows: 0fr;
   transition: 300ms ease-in-out;
-
-   div {
-    overflow: hidden;
-  }
 }
 
 .submenu.show {
   grid-template-rows: 1fr;
 }
+
+.submenu .sub-menu-content {
+  overflow: hidden;
+}

frontend/src/app/compliance/shared/components/utm-cp-section/utm-cp-section.component.html

@@ -8,7 +8,7 @@
      [ngClass]="{'icon-arrow-right32': !section.isCollapsed, 'icon-arrow-down32 font-weight-bold' : section.isCollapsed}"></i>
 </button>
 <ul class="submenu" [ngClass]="{ 'show': section.isCollapsed && expandable }" id="collapse{{ section.id }}">
-  <div class="pr-2">
+  <div class="sub-menu-content pr-2">
     <li class="section-item cursor-pointer mb-1"
         [ngClass]="{'active': section.isActive && report.selected}"
         *ngFor="let report of reports$  | async as reports; let index = index"

frontend/src/app/compliance/shared/components/utm-cp-section/utm-cp-section.component.ts

@@ -86,6 +86,8 @@ export class UtmCpSectionComponent implements OnInit, OnChanges {
   loadReports() {
     if (!this.section.isActive) {
       this.isActive.emit(this.index);
+    } else {
+      this.section.isCollapsed = !this.section.isCollapsed;
     }
   }