Fix mtx-select dropdown z-index issues in modals for Angular 21

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

Author: Copilot

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>{{'New dropdown' | translate}}</h3>
     <mat-label>{{'Security groups' | translate}}</mat-label>
     <mtx-select
       dropdownPosition="bottom"
+      appendTo="body"
       [(ngModel)]="customDropdownModel.securityGroupsIds"
       [bindValue]="'id'"
       [bindLabel]="'name'"

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

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

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

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

eform-client/src/app/modules/eforms/components/eform-create-modal/eform-create-modal.component.html

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

eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field-modal/visual-editor-field-modal.component.html

@@ -14,6 +14,7 @@ <h3 mat-dialog-title>{{ (isFieldSelected ? 'Edit field' : 'New field') | transla
             <mtx-select
               class="custom"
               dropdownPosition="bottom"
+              appendTo="body"
               [clearable]="false"
               [bindLabel]="'name'"
               [bindValue]="'id'"

eform-client/src/scss/styles.scss

@@ -1521,3 +1521,14 @@ app-footer {
   border: none !important;
 
 }
+
+// Fix z-index for ng-select/mtx-select dropdowns in modals (Angular 21)
+// Material dialogs have z-index 1000, so dropdown panels need to be higher
+.ng-dropdown-panel {
+  z-index: 10000 !important;
+}
+
+// Ensure cdk-overlay-container (used by mtx-select with appendTo="body") is above dialogs
+.cdk-overlay-container .ng-dropdown-panel {
+  z-index: 10000 !important;
+}