How to remove the blank space in the component

<div
  class="toaster position-fixed top-0 end-0 px-3 py-2"
  style="margin-top: 10%"
>
  <div *ngFor="let toast of currentToasts; index as i">
    <app-toast
      [type]="toast.type"
      [title]="toast.title"
      [message]="toast.message"
      [iconType]="toast.iconType"
      (disposeEvent)="dispose(i)"
    ></app-toast>
  </div>
</div>

<div #toastElement class="toast mt-2 flex-row d-flex w-auto m-0">
  <div
    class="d-flex justify-content-center align-items-center p-3"
    [ngClass]="type"
  >
    <span class="material-icons">{{ iconType }}</span>
  </div>
  <div
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    class="p-3"
    style="
      margin: 0;
      color: var(--color-text);
      background-color: var(--color-component-select-bg);
    "
  >
    <div
      class="d-flex justify-content-between balanced"
      style="max-width: 45vw"
    >
      <strong class="me-auto">{{ title }}</strong>
      <button
        *ngIf="isDarkTheme === true"
        type="button"
        class="btn-close btn-close-white"
        aria-label="Close"
        (click)="hide()"
        style="height: 10px"
      ></button>
      <button
        *ngIf="isDarkTheme === false"
        type="button"
        class="btn-close"
        aria-label="Close"
        (click)="hide()"
        style="height: 10px"
      ></button>
    </div>
    <div style="max-width: 45vw" class="balanced">
      {{ message }}
    </div>
  </div>
</div>