fix(UI): MatDialog - PopUp Modal

Author: sawankshrma

src/app/pages/circular-heatmap/circular-heatmap.component.ts

@@ -821,7 +821,7 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
     };
 
     const dialogRef = this.dialog.open(AddEvidenceModalComponent, {
-      width: '700px',
+      width: '600px',
       maxHeight: '90vh',
       data: dialogData,
     });
@@ -841,7 +841,7 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
     };
 
     this.dialog.open(ViewEvidenceModalComponent, {
-      width: '700px',
+      width: '500px',
       maxHeight: '90vh',
       data: dialogData,
     });

src/app/pages/report/report.component.ts

@@ -502,7 +502,8 @@ export class ReportComponent implements OnInit {
     };
 
     this.dialog.open(ViewEvidenceModalComponent, {
-      width: '700px',
+      width: '100000px',
+      maxWidth: 'none',
       maxHeight: '90vh',
       data: dialogData,
     });

src/custom-theme.scss

@@ -101,13 +101,27 @@ html {
     color: var(--text-primary);
   }
 
-  .mat-mdc-dialog-container {
-    background-color: var(--background-tertiary);
+.cdk-overlay-pane.mat-mdc-dialog-panel {
+  max-width: 90vw !important;
+}
+
+.mat-mdc-dialog-container {
+  --mdc-dialog-container-color: var(--background-primary);
+  --mdc-dialog-subhead-color: var(--text-primary);
+  --mdc-dialog-supporting-text-color: var(--text-primary);
+  --mdc-dialog-container-shape: 24px;
+    background-color: var(--background-primary);
     color: var(--text-primary);
     border: 1px solid var(--border-medium);
     border-radius: 12px;
   }
 
+  .mat-mdc-dialog-content {
+    background-color: var(--background-tertiary);
+  }
+
+  
+
   .mat-expansion-panel,
   .mat-accordion {
     background-color: var(--background-primary);