How to disable horizontal bar

I am using Sweetalert2 and Bootstrap 5.1.3. I am trying to decorate the Sweetalert like below:

        var htmlString = `
        <div class="row"><div class="text-end col-6">ID:</div> <div class="text-start col-6">${data.id}</div></div>
        <div class="row"><div class="text-end col-6">Name:</div> <div class="text-start col-6">${data.name}</div></div>
        <div class="row"><div class="text-end col-6">Email:</div> <div class="text-start col-6">${data.email}</div></div>
        <div class="row"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">${data.active}</div></div>
        `;

And my Swal.fire block:

        Swal.fire({
            titleText: 'You sure to delete this user? ',
            showDenyButton: true,
            //showCancelButton: true,
            confirmButtonText: 'Yes',
            confirmButtonColor: 'green',
            denyButtonText: 'No',
            denyButtonColor: 'gray',
            customClass: {
                actions: 'my-actions',
                confirmButton: 'order-1',
                denyButton: 'order-2 right-gap',
            },
            html: htmlString,
            focusDeny: true,
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(`${baseURL}/appUsers/${id}`, { method: "delete" });
                var p = obj.parentNode.parentNode;
                p.parentNode.removeChild(p);
                Swal.fire('Deleted Successfully !!', '', 'success');
            } else if (result.isDenied) {
                Swal.fire('Changes are not saved', '', 'info')
            }
        })

Now the alert has a weird looking horizontal bar like this:

Question: How do I get rid of this?

Solution

If you can find a way to style the swal container element from the config, you can add style overflow-x: hidden value. Otherwise, you can include a CSS style, after I check the container class name you can use is .swal2-html-container

.swal2-html-container {
  overflow-x: hidden;
}

https://codepen.io/david-yappeter/pen/NWwwyQg?editors=1111

// EDIT: other solution, add m-0 class after row

<div class="row m-0"><div class="text-end col-6">ID:</div> <div class="text-start col-6">ID</div></div>
        <div class="row m-0"><div class="text-end col-6">Name:</div> <div class="text-start col-6">NAME</div></div>
        <div class="row m-0"><div class="text-end col-6">Email:</div> <div class="text-start col-6">EMAIL</div></div>
        <div class="row m-0"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">ACTIVE</div></div>

or wrap it with class container

<div class="container">
        <div class="row"><div class="text-end col-6">ID:</div> <div class="text-start col-6">ID</div></div>
        <div class="row"><div class="text-end col-6">Name:</div> <div class="text-start col-6">NAME</div></div>
        <div class="row"><div class="text-end col-6">Email:</div> <div class="text-start col-6">EMAIL</div></div>
        <div class="row"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">ACTIVE</div>
        </div>