How to fix items inside popup not centering?

Question

As you can see, the items in the popup are cut off due to the smaller height.

How do I make the title and loading icon center within the popup?

Here is my code:

Swal.fire({
  toast: true,
  icon: 'info',
  title: 'Restoring messages...',
  animation: true,
  showCloseButton: true,
  showCancelButton: false,
  showConfirmButton: false,
  allowOutsideClick: false,
  allowEscapeKey: false,
  allowEnterKey: false,
  position: 'top',
  didOpen: () => {
    Swal.showLoading();
  }
});

.swal2-popup.swal2-toast.swal2-show,
.swal2-popup.swal2-toast.swal2-hide {
  position: fixed !important;
  top: 0px !important;
  height: 50px !important;
}

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Answer 1

You can do it by adding padding: 0 to your css code. What happens behind the scenes is that you are giving a limited height so it seems like not centered, but it is actually.

The CSS code:

.swal2-popup.swal2-toast.swal2-show, .swal2-popup.swal2-toast.swal2-hide {
    position: fixed !important;
    top: 0px !important;
    height: 50px !important;
    padding: 0;
}