refactor: standardize MatDialog sizing with semantic size tiers

Author: sawankshrma

src/app/component/modal-message/modal-message.component.ts

@@ -9,6 +9,7 @@ import {
 import md from 'markdown-it';
 import { MarkdownText } from 'src/app/model/markdown-text';
 import { NotificationService } from 'src/app/service/notification.service';
+import { dialogSizeConfig } from 'src/app/util/dialog-sizes';
 import { MatButtonModule } from '@angular/material/button';
 import { NgFor } from '@angular/common';
 
@@ -62,6 +63,7 @@ export class ModalMessageComponent implements OnInit {
     dialogConfig.disableClose = true;
     dialogConfig.data = dialogInfo;
     dialogConfig.autoFocus = false;
+    Object.assign(dialogConfig, dialogSizeConfig('md'));
     this.dialogRef = this.dialog.open(ModalMessageComponent, dialogConfig);
     return this.dialogRef;
   }

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

@@ -37,6 +37,7 @@ import {
   ViewEvidenceModalComponent,
   ViewEvidenceModalData,
 } from '../../component/view-evidence-modal/view-evidence-modal.component';
+import { dialogSizeConfig } from '../../util/dialog-sizes';
 import { ProgressSliderComponent } from '../../component/progress-slider/progress-slider.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -821,8 +822,7 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
     };
 
     const dialogRef = this.dialog.open(AddEvidenceModalComponent, {
-      width: '600px',
-      maxHeight: '90vh',
+      ...dialogSizeConfig('md'),
       data: dialogData,
     });
 
@@ -841,8 +841,7 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
     };
 
     this.dialog.open(ViewEvidenceModalComponent, {
-      width: '500px',
-      maxHeight: '90vh',
+      ...dialogSizeConfig('md'),
       data: dialogData,
     });
   }

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

@@ -23,6 +23,7 @@ import {
   ViewEvidenceModalComponent,
   ViewEvidenceModalData,
 } from '../../component/view-evidence-modal/view-evidence-modal.component';
+import { dialogSizeConfig } from '../../util/dialog-sizes';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ColResizeDirective } from '../../directive/col-resize.directive';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -334,8 +335,7 @@ export class ReportComponent implements OnInit {
     };
 
     const dialogRef = this.dialog.open(ReportConfigModalComponent, {
-      width: '700px',
-      maxHeight: '90vh',
+      ...dialogSizeConfig('lg'),
       data: modalData,
     });
 
@@ -502,9 +502,7 @@ export class ReportComponent implements OnInit {
     };
 
     this.dialog.open(ViewEvidenceModalComponent, {
-      width: '100000px',
-      maxWidth: 'none',
-      maxHeight: '90vh',
+      ...dialogSizeConfig('md'),
       data: dialogData,
     });
   }

src/app/service/notification.service.ts

@@ -5,6 +5,7 @@ import {
   ModalMessageComponent,
   DialogInfo,
 } from '../component/modal-message/modal-message.component';
+import { dialogSizeConfig } from '../util/dialog-sizes';
 
 @Injectable({ providedIn: 'root' })
 export class NotificationService {
@@ -21,6 +22,7 @@ export class NotificationService {
     dialogConfig.disableClose = true;
     dialogConfig.autoFocus = false;
     dialogConfig.data = new DialogInfo(message, title);
+    Object.assign(dialogConfig, dialogSizeConfig('md'));
 
     this.dialog.open(ModalMessageComponent, dialogConfig);
   }

src/app/util/dialog-sizes.ts

@@ -0,0 +1,17 @@
+import { MatDialogConfig } from '@angular/material/dialog';
+
+export type DialogSize = 'sm' | 'md' | 'lg';
+
+const DIALOG_WIDTHS: Record<DialogSize, string> = {
+  sm: '480px',
+  md: '640px',
+  lg: '90vw',
+};
+
+export function dialogSizeConfig(size: DialogSize): Partial<MatDialogConfig> {
+  return {
+    width: DIALOG_WIDTHS[size],
+    maxWidth: size === 'lg' ? '90vw' : '80vw',
+    maxHeight: '90vh',
+  };
+}

src/custom-theme.scss

@@ -101,9 +101,6 @@ html {
     color: var(--text-primary);
   }
 
-.cdk-overlay-pane.mat-mdc-dialog-panel {
-  max-width: 90vw !important;
-}
 
 .mat-mdc-dialog-container {
   --mdc-dialog-container-color: var(--background-primary);