Implement custom OverlayContainer for Angular 21 popover top layer compatibility

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

Author: Copilot

eform-client/src/app/app.module.ts

@@ -67,6 +67,8 @@ import {
 } from './state';
 import {NgxMaskDirective, NgxMaskPipe} from 'ngx-mask';
 import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
+import {OverlayContainer} from '@angular/cdk/overlay';
+import {CustomOverlayContainer} from './common/services/custom-overlay-container.service';
 
 // Factory function for APP_INITIALIZER to register icons
 export function registerIconsFactory(iconService: IconService) {
@@ -153,6 +155,10 @@ export function registerIconsFactory(iconService: IconService) {
             useFactory: registerIconsFactory,
             deps: [IconService],
             multi: true
+        },
+        {
+            provide: OverlayContainer,
+            useClass: CustomOverlayContainer
         }
     ],
     bootstrap: [AppComponent],

eform-client/src/app/common/services/custom-overlay-container.service.ts

@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import { OverlayContainer } from '@angular/cdk/overlay';
+
+/**
+ * Custom OverlayContainer that works with Angular 21's native popover API.
+ * 
+ * Angular 21 uses the browser's top layer for modals (via popover="manual"),
+ * which means CDK overlays (dropdowns, tooltips) appear behind modals.
+ * 
+ * This service dynamically moves the overlay container inside the active modal
+ * so overlays render above the modal content.
+ * 
+ * Based on: https://qupaya.com/blog/using-the-angular-cdk-overlay-with-native-dialogs/
+ * Issue: https://github.com/angular/components/issues/28133
+ */
+@Injectable({ providedIn: 'root' })
+export class CustomOverlayContainer extends OverlayContainer {
+  private containerStack: HTMLElement[] = [];
+
+  /**
+   * Set a custom parent element for the overlay container.
+   * Call this when opening a modal to move overlays inside it.
+   * 
+   * @param element The modal/dialog element to append overlays to
+   */
+  public setContainerParent(element: HTMLElement): void {
+    // Save current parent to stack for restoration
+    if (this._containerElement) {
+      this.containerStack.push(this._containerElement.parentElement as HTMLElement);
+    }
+
+    // Move overlay container to the new parent (modal)
+    if (this._containerElement && element) {
+      element.appendChild(this._containerElement);
+    }
+  }
+
+  /**
+   * Restore the overlay container to its previous parent.
+   * Call this when closing a modal.
+   */
+  public restoreContainerParent(): void {
+    if (!this._containerElement) {
+      return;
+    }
+
+    const previousParent = this.containerStack.pop();
+    if (previousParent) {
+      previousParent.appendChild(this._containerElement);
+    } else {
+      // Fallback to body if no previous parent
+      document.body.appendChild(this._containerElement);
+    }
+  }
+
+  /**
+   * Override to ensure container is created in body by default
+   */
+  protected override _createContainer(): void {
+    super._createContainer();
+    
+    // Ensure it starts in the body
+    if (this._containerElement && !this._containerElement.parentElement) {
+      document.body.appendChild(this._containerElement);
+    }
+  }
+}

eform-client/src/app/common/services/dialog-wrapper.service.ts

@@ -0,0 +1,64 @@
+import { Injectable, ComponentType, inject } from '@angular/core';
+import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { CustomOverlayContainer } from './custom-overlay-container.service';
+import { filter, take } from 'rxjs/operators';
+
+/**
+ * Wrapper service for MatDialog that automatically manages overlay container
+ * placement for Angular 21's popover top layer.
+ * 
+ * This service ensures dropdowns and overlays within dialogs appear correctly
+ * by moving the CDK overlay container inside the dialog element.
+ */
+@Injectable({ providedIn: 'root' })
+export class DialogWrapperService {
+  private dialog = inject(MatDialog);
+  private overlayContainer = inject(CustomOverlayContainer);
+  
+  /**
+   * Opens a modal dialog and manages overlay container placement.
+   * 
+   * @param component The component to display in the dialog
+   * @param config Dialog configuration options
+   * @returns DialogRef for the opened dialog
+   */
+  public open<T, D = any, R = any>(
+    component: ComponentType<T>,
+    config?: MatDialogConfig<D>
+  ): MatDialogRef<T, R> {
+    const dialogRef = this.dialog.open(component, config);
+
+    // Wait for dialog to open and DOM to be ready
+    setTimeout(() => {
+      // Find the dialog container element
+      const dialogElement = document.querySelector('.mat-mdc-dialog-container');
+      if (dialogElement) {
+        // Move overlay container inside this dialog
+        this.overlayContainer.setContainerParent(dialogElement as HTMLElement);
+      }
+    }, 0);
+
+    // Restore overlay container when dialog closes
+    dialogRef.afterClosed().pipe(
+      take(1)
+    ).subscribe(() => {
+      this.overlayContainer.restoreContainerParent();
+    });
+
+    return dialogRef;
+  }
+
+  /**
+   * Closes all currently open dialogs
+   */
+  public closeAll(): void {
+    this.dialog.closeAll();
+  }
+
+  /**
+   * Gets a reference to an open dialog by ID
+   */
+  public getDialogById(id: string): MatDialogRef<any> | undefined {
+    return this.dialog.getDialogById(id);
+  }
+}