<app-modal-wrapper [config]="{disableClose: true,size: 'normal',panelClass: ['overflow-visible', 'material-modal']}" (dismiss)="showDownloadSuccessModal = false" #modal>
    <ng-template sbModalContent>
        <div class="sb-mat__modal sb-onboard">
            <div mat-dialog-title class="flex-jc-center">
                <div class="sb-onboard__header">
                    <h4> {{resourceService.frmelmnts?.btn?.addEntity}} </h4>
                </div>
                <button aria-label="close dialog" mat-dialog-close class="close-btn" (click)="closeModal()">
                </button>
            </div>
            <mat-dialog-content>
                <div class="sb-mat__modal__content">
                    <div class="sbt-search-box search-box">
                        <div class="input-div relative" id="search-input-container">
                            <img src="assets/images/search-icon.svg" class="search icon" alt="Search Icon">
                            <input type="text" name="filter_search" class="sb-search-input" [(ngModel)]="searchQuery"
                                placeholder="{{resourceService?.frmelmnts.lbl.search}}" (ngModelChange)="searchEntity()" />
                        </div>
                    </div>
                </div>
            </mat-dialog-content>
            <mat-dialog-content>
                <div class="sb-mat__modal__content">
                        <div class="sb-modal-content content search-results">
                        <div *ngIf="entities?.length">
                            <div *ngFor="let entity of entities">
                                <div class="sb-checkbox sb-checkbox-secondary pt-24 ui checkbox">
                                    <input value="{{entity._id}}" type="checkbox" id="{{entity._id}}"
                                        [ngClass]="{'disabled-checkbox' :entity.isSelected}" (change)="selectEntity(entity)"
                                        [disabled]="entity.isSelected"
                                        [checked]="entity.selected || selectedEntities?.includes(entity._id)">
                                    <label for="{{entity._id}}" class="text-left fsmall">{{entity.name}}</label>
                                </div>
                            </div>
                        </div>
                        <div class="twelve wide column" *ngIf="showLoaderBox">
                            <app-loader [data]='loaderMessage'></app-loader>
                        </div>
                        <div class="twelve wide column" *ngIf="!showLoaderBox && entities?.length === 0">
                            <app-no-result [data]="noResultMessage"></app-no-result>
                        </div>
                    </div>
                </div>
            </mat-dialog-content>
            <mat-dialog-actions class="mb-0 sb-mat__modal__actions flex-jc-center">
                <div class="sb-onboard__footer d-flex">
                    <button type="button" class="sb-btn sb-btn-sm sb-btn-white text-uppercase flex-basis-1"
                        type="submit" tabindex="0" (click)="closeModal()">
                        {{resourceService.frmelmnts?.btn?.close}}
                    </button>
                    <div class="w-10"></div>
                    <button type="button" class="sb-btn sb-btn-sm sb-btn-primary text-uppercase flex-basis-1"
                        type="submit" tabindex="0" (click)="submit()" [disabled]="selectedListCount == 0"
                        [ngClass]="{'sb-btn-disabled' : selectedListCount == 0}">
                        {{resourceService.frmelmnts?.btn?.submit}}
                    </button>
                </div>
            </mat-dialog-actions>
        </div>
    </ng-template>
</app-modal-wrapper>

./add-entity.component.scss

@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;

  .sb-modal-content {
    height: calc(100vh - 21.875rem) !important;
    }
  .content{
    max-height: 65vh;
    label{
      color: var(--sb-prominent-filter-title);
    }
    label:hover{
      cursor: pointer;
    }
  }
  .footer{
    width: 100%;
    text-align: center;
    display: flex;
    background: var(--sb-card-bg);
    border-top: none;
  }
  .search-box{
    margin-top: calculateRem(15px);
  }

  .sb-onboard {
    &__header {
      width: 100%;
      margin: calculateRem(20px) 0px;
      padding-left : calculateRem(15px);
    }
  
    &__content {
      width: calculateRem(648px);
      max-width: 100%;
      margin-bottom: auto;
      overflow: hidden;
      overflow-y: auto;
    }
  
    &__footer {
      margin-top: calculateRem(16px);
      width: 100%;
      text-align: center;
    }
  }
  

::ng-deep {
  .sb-onbrd-modal {
    @include respond-below(sm) {
      .ui.modal {
        margin: 0 0 0 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
      }

      .ui.modal.scroll {
        position: fixed !important;
        top: 0;
        width: 100%;
        left: 0px;
        right: 0px;
        margin: 0 !important;
      }
    }
  }
}
  .sbt-search-box{
    box-shadow: none;
    margin: 0;
  }
  .load-mr-btn{
    height: 2rem;
    font-size: 1rem;
    padding: 0.5rem 2rem;
  }
  .load-mr-bt-center{
    text-align:center
}

input[type=checkbox][disabled] {
  background: var(--sb-card-bg);
  border: var(--gray-100);
}
.search-results{ height : 100%; overflow-y: scroll; }