Steps to reproduce the issue

Not an easy feat, since I create the modal in JavaScript, using a <template>, which I first create dynamically and subsequently clone into the DOM. This is the code I use:

const container = document.getElementsByTagName('body')[0];
let modal = document.getElementById('translator-options');

if (!modal) {
    const template = document.createElement('template');

    template.innerHTML = options.modal;
    container.appendChild(template.content.cloneNode(true));

    modal = document.getElementById('translator-options');
}

The options.modal, used to set the template.innerHTML, contains the HTML to be rendered and is passed to the script using Joomla\CMS\Document\Document::addScriptOptions().

For the purpose of this issue, I used the HTML from first example on the Bootstrap 5 - Modal documentation page:

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Expected result

Something more or less similar to the Bootstrap 5 example, adapted to the Atum house style only where necessary:

-- The unmodified Bootstrap 5 example

Actual result

-- The modal as displayed by my JS script.

Additional comments

There are at least two things that stand out:

• Padding for modal header, body and footer is inconsistent. The body does not even have any padding at all anymore.
• There is no distinction between primary and secondary buttons.