Apply proper Angular 21 solution: use appendTo='.cdk-overlay-pane' for modal dropdowns

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

Author: Copilot

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

@@ -67,8 +67,6 @@ 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) {
@@ -155,10 +153,6 @@ 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

@@ -12,8 +12,6 @@ import {
 import {AuthStateService} from 'src/app/common/store';
 import {TranslateService} from '@ngx-translate/core';
 import { SpinnerComponent } from './eform-spinner/spinner.component';
-import { MatDialog } from '@angular/material/dialog';
-import { CustomOverlayContainer } from 'src/app/common/services/custom-overlay-container.service';
 
 @Component({
     selector: 'app-root',
@@ -30,30 +28,9 @@ export class AppComponent implements OnInit, OnDestroy {
   private ngTitle = inject(Title);
   private titleService = inject(TitleService);
   private authSyncStorageService = inject(AuthSyncStorageService);
-  private dialog = inject(MatDialog);
-  private overlayContainer = inject(CustomOverlayContainer);
 
   public selectIsAuth$ = this.authStore.select(selectAuthIsAuth);
 
-  constructor() {
-    // Automatically move overlay container into dialogs for Angular 21 popover compatibility
-    // This ensures dropdowns (mtx-select, ng-select) appear above modal content
-    this.dialog.afterOpened.subscribe(dialogRef => {
-      // Use setTimeout to ensure dialog element is in DOM
-      setTimeout(() => {
-        const dialogElement = document.querySelector('.mat-mdc-dialog-container');
-        if (dialogElement) {
-          this.overlayContainer.setContainerParent(dialogElement as HTMLElement);
-        }
-      }, 0);
-
-      // Restore overlay container when dialog closes
-      dialogRef.afterClosed().subscribe(() => {
-        this.overlayContainer.restoreContainerParent();
-      });
-    });
-  }
-
   ngOnInit(): void {
     this.authSyncStorageService.init();
     this.selectIsAuth$.pipe(debounceTime(1000), take(1)).subscribe((isAuth) => {

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

@@ -13,6 +13,7 @@ <h3 mat-dialog-title>{{ 'Edit' | translate}}</h3>
       <mat-label>{{ 'Current tags' | translate }}</mat-label>
       <mtx-select
         class="custom"
+        [appendTo]="'.cdk-overlay-pane'"
         [dropdownPosition]="'bottom'"
         [(ngModel)]="site.tags"
         [bindValue]="'id'"

eform-client/src/app/components/app.component.ts

@@ -3,6 +3,7 @@ <h3 mat-dialog-title>{{'New dropdown' | translate}}</h3>
   <mat-form-field>
     <mat-label>{{'Security groups' | translate}}</mat-label>
     <mtx-select
+      [appendTo]="'.cdk-overlay-pane'"
       [dropdownPosition]="'bottom'"
       [(ngModel)]="customDropdownModel.securityGroupsIds"
       [bindValue]="'id'"

eform-client/src/app/modules/advanced/components/sites/site-edit/site-edit.component.html

@@ -4,6 +4,7 @@ <h3 mat-dialog-title>{{ 'New custom link' | translate }}</h3>
     <mat-form-field>
       <mat-label>{{ 'Security groups' | translate }}</mat-label>
       <mtx-select
+        [appendTo]="'.cdk-overlay-pane'"
         [dropdownPosition]="'bottom'"
         [(ngModel)]="customLinkModel.securityGroupsIds"
         [bindValue]="'id'"

eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-dropdown/navigation-menu-custom-dropdown.component.html

@@ -4,6 +4,7 @@ <h3 mat-dialog-title>{{'Edit menu entry' | translate}}</h3>
     <mat-form-field>
       <mat-label>{{'Security groups' | translate}}</mat-label>
       <mtx-select
+        [appendTo]="'.cdk-overlay-pane'"
         [dropdownPosition]="'bottom'"
         [(ngModel)]="item.securityGroupsIds"
         [bindValue]="'id'"

eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-link/navigation-menu-custom-link.component.html

@@ -6,6 +6,7 @@ <h3 mat-dialog-title>{{ 'Create eForm' | translate }}</h3>
       <mat-label>{{ 'Tags' | translate }}</mat-label>
       <mtx-select
         class="custom"
+        [appendTo]="'.cdk-overlay-pane'"
         [dropdownPosition]="'bottom'"
         [(ngModel)]="eFormCreateModel.tagIds"
         [bindValue]="'id'"

eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-edit/navigation-menu-item-edit.component.html

@@ -4,6 +4,7 @@ <h3 mat-dialog-title>{{ 'Select tags for template' | translate }}</h3>
     <mat-label>{{ 'Current tags' | translate }}</mat-label>
     <mtx-select
       class="custom"
+      [appendTo]="'.cdk-overlay-pane'"
       [dropdownPosition]="'bottom'"
       [(ngModel)]="selectedTemplateTagsIds"
       [bindValue]="'id'"