Big gap between thumbnails bar and image in carousel with di

Hello

In the Thumbnails carousel pro component when i have image with different height, when an image with the smaller height is selected there is a big white gap between the thumbnails bar and the image. the expected behavior would be that the Thumbnails bar would be below the image container with a slight padding what ever the image size.

<div class="container">
  <div class="row">
    <div class="col-8 d-flex justify-content-center">
      <mdb-carousel *ngIf="resourceList.length > 0" #imagesCarousel [isControls]="true"
                    [class]="'carousel-fade'"
                    [type]="'carousel-thumbnails'"
                    (activeSlideChange)="onActiveSlideChange($event)"
                    [animation]="'fade'">
        <!--First slide-->
        <mdb-carousel-item *ngFor="let resourceItem of resourceList" class="p-1">


            <div class="row align-items-center">
              <div class="col d-flex justify-content-center">
                <figure>
                  <img width="470" class="img-fluid rounded" [src]="resourceItem.url">
                </figure>
              </div>
            </div>

        </mdb-carousel-item>

      </mdb-carousel>
    </div>
    <div class="col-4">
      <div  [class]="
                    'm-1 p-2 border rounded border-secondary'">
        <a *ngFor="let otherResourceItem of otherResourceList; let i=index;" (click)="addImage(otherResourceItem.id)">
          <img [src]="otherResourceItem.url"
               [class]="'img-thumbnail border-warning'"
               [style]="'width: 50px'">
        </a>
      </div>

    </div>
  </div>
</div>
import {Component, OnInit, ViewChild} from '@angular/core';
import {CarouselComponent} from 'ng-uikit-pro-standard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  @ViewChild('imagesCarousel', {static: false}) imagesCarousel: CarouselComponent;

  title = 'ng-uikit-pro-standard';

  resourceList: Array<ResourceItem> = [
    {id: 0, url: 'https://images.unsplash.com/photo-1591619488631-426aa7293534?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2242&q=80'},
    {id: 1, url: 'https://pi.tedcdn.com/r/talkstar-assets.s3.amazonaws.com/production/playlists/playlist_398/reconnect_with_nature.jpg?'},
    // tslint:disable-next-line:max-line-length
    {
      id: 2,
      url: 'https://www.spain.info/export/sites/segtur/.content/imagenes/destacados-homes-cuadrados/mirador-galiana-ucero-soria-c-alberto-frias-u1195950.jpg'
    },
    // tslint:disable-next-line:max-line-length
    {
      id: 3,
      url: 'https://www.visitcentroamerica.com/wp-content/uploads/2017/08/central-america-native-protected-spaces-nature-reserves-park-national-volcanoes-salvador-800x800.jpg'
    },
    // tslint:disable-next-line:max-line-length
    {id: 4, url: 'https://pteproductions.com/wp-content/uploads/2017/02/landscape14-800x800.jpg'},
    {id: 5, url: 'https://spfcanyon.com/images/uploads/_ansel_image_cache/3c957ac47ff881b2b1027d054d67d806.jpg'}];


  otherResourceList: Array<ResourceItem> = [
    {id: 6, url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKVbtH4hJQLGYG_6mfVHABen7ITmZwMMbSUA&usqp=CAU'},
    // tslint:disable-next-line:max-line-length
    {
      id: 7,
      url: 'https://pi.tedcdn.com/r/talkstar-assets.s3.amazonaws.com/production/playlists/playlist_30/natural_wonder.jpg?quality=89&w=800'
    },
    // tslint:disable-next-line:max-line-length
    {id: 8, url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrUNEl9KJwRd3UrAdFwAaR1-sB6ahZVeniEg&usqp=CAU'},
    // tslint:disable-next-line:max-line-length
    {id: 9, url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFDYsIxNvFpFUmUW-uPlAwXwNaAT5BHulqQQ&usqp=CAU'},
    {id: 10, url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSouUzXWhv1-tleZv1oFyHx9xuO_zxmpD6sVw&usqp=CAU'}];

  constructor() {
  }

  ngOnInit() {

  }

  onActiveSlideChange($event) {
  }

  addImage(i: number) {
    console.log('adding image with id ' + i);
    // setTimeout(() => {
    if (this.resourceList.length > 5) {
      this.resourceList = this.resourceList.filter(res => res.id <= 5);
    }
    this.resourceList.push(this.otherResourceList.find(or => or.id === i));

    this.imagesCarousel.selectSlide(i - 1);
    // this.detectChanges(this.cdRef);
    // }, 1000);


  }
}
export class ResourceItem {
  id: number;
  url: string;
}