DataTables pagination buttons break with many pages

Question

What could cause DataTables pagination to break like that (the Previous button and the pages numbers):

Also, when the number of page is too long, for example 14233, it is hidden inside the button.

How can I fix DataTable pagination to adjust correctly to the text in the button and also not make the "Previous" button go out of the button borders?

This is my sDom:

.DataTable({
    sDom: '<"row"<"col-10" B><"col-1"f><"col-1 r-0"l>>tip',

But nothing seem to fix that

Edit: I noticed that whenever I add the "disabled" class to the ui element of the "Previous" button, it fixes the issue, but how can I check what exactly is the thing in the disabled class that fixes it?

This is the HTML:

<table class="table text-md-nowrap" cellspacing="0" width="100%" style="box-sizing: border-box">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th width="20"></th>
            </tr>
    </thead>
</table>