fix(module:modal,drawer): secondary overlays not scrolling inside (#8804)

Author: ParsaArvanehPA

components/drawer/drawer.component.ts

@@ -6,7 +6,7 @@
 import { FocusTrap, FocusTrapFactory } from '@angular/cdk/a11y';
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { ESCAPE } from '@angular/cdk/keycodes';
-import { Overlay, OverlayConfig, OverlayKeyboardDispatcher, OverlayRef } from '@angular/cdk/overlay';
+import { CdkScrollable, Overlay, OverlayConfig, OverlayKeyboardDispatcher, OverlayRef } from '@angular/cdk/overlay';
 import { CdkPortalOutlet, ComponentPortal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
 import { DOCUMENT, NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
@@ -118,7 +118,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'drawer';
                   }
                 </div>
               }
-              <div class="ant-drawer-body" [ngStyle]="nzBodyStyle">
+              <div class="ant-drawer-body" [ngStyle]="nzBodyStyle" cdkScrollable>
                 <ng-template cdkPortalOutlet />
                 @if (nzContent) {
                   @if (isNzContentTemplateRef) {
@@ -146,7 +146,15 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'drawer';
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [drawerMaskMotion],
-  imports: [NzNoAnimationDirective, NgStyle, NzOutletModule, NzIconModule, PortalModule, NgTemplateOutlet],
+  imports: [
+    NzNoAnimationDirective,
+    NgStyle,
+    NzOutletModule,
+    NzIconModule,
+    PortalModule,
+    NgTemplateOutlet,
+    CdkScrollable
+  ],
   standalone: true
 })
 export class NzDrawerComponent<T extends {} = NzSafeAny, R = NzSafeAny, D extends Partial<T> = NzSafeAny>

components/modal/modal-confirm-container.component.ts

@@ -3,6 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { CdkScrollable } from '@angular/cdk/overlay';
 import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import { NgClass, NgStyle } from '@angular/common';
 import {
@@ -91,6 +92,7 @@ import { BaseModalContainerComponent } from './modal-container.directive';
       </div>
     </div>
   `,
+  hostDirectives: [CdkScrollable],
   animations: [nzModalAnimations.modalContainer],
   // Using OnPush for modal caused footer can not to detect changes. we can fix it when 8.x.
   changeDetection: ChangeDetectionStrategy.Default,

components/modal/modal-container.component.ts

@@ -4,6 +4,7 @@
  */
 
 import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { CdkScrollable } from '@angular/cdk/overlay';
 import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import { NgClass, NgStyle } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
@@ -19,6 +20,7 @@ import { NzModalTitleComponent } from './modal-title.component';
 @Component({
   selector: 'nz-modal-container',
   exportAs: 'nzModalContainer',
+  hostDirectives: [CdkScrollable],
   template: `
     <div
       #modalElement