Fix Angular 21 modal/dialog positioning and rendering issues

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>

Author: Copilot

eform-client/src/app/common/helpers/dialog-config.helper.ts

@@ -4,8 +4,9 @@ import { MatDialogConfig } from '@angular/material/dialog';
 export function dialogConfigHelper(overlay: Overlay, data?: any): MatDialogConfig {
   return {
     disableClose: true,
+    hasBackdrop: true,
     minWidth: 300,
-    scrollStrategy: overlay.scrollStrategies.reposition(),
+    scrollStrategy: overlay.scrollStrategies.block(),
     data: data,
   }
 }

eform-client/src/scss/styles.scss

@@ -1532,3 +1532,61 @@ app-footer {
 .cdk-overlay-container .ng-dropdown-panel {
   z-index: 10000 !important;
 }
+
+// Fix Angular 21 dialog/modal positioning and backdrop
+.cdk-global-overlay-wrapper {
+  display: flex !important;
+  position: absolute !important;
+  z-index: 1000 !important;
+  pointer-events: none !important;
+  top: 0 !important;
+  left: 0 !important;
+  height: 100% !important;
+  width: 100% !important;
+  justify-content: center !important;
+  align-items: center !important;
+}
+
+.cdk-overlay-pane {
+  position: relative !important;
+  pointer-events: auto !important;
+  box-sizing: border-box !important;
+  z-index: 1000 !important;
+  display: flex !important;
+  max-width: 100vw !important;
+  max-height: 100vh !important;
+}
+
+.cdk-overlay-backdrop {
+  position: absolute !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  z-index: 1000 !important;
+  pointer-events: auto !important;
+  -webkit-tap-highlight-color: transparent !important;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+  opacity: 1 !important;
+}
+
+.mat-mdc-dialog-container {
+  display: flex !important;
+  flex-direction: column !important;
+  box-sizing: border-box !important;
+  overflow: auto !important;
+  outline: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  min-height: inherit !important;
+  max-height: inherit !important;
+  pointer-events: auto !important;
+}
+
+.mat-mdc-dialog-surface {
+  display: flex !important;
+  flex-direction: column !important;
+  flex-grow: 1 !important;
+  overflow: auto !important;
+  max-height: 65vh !important;
+}