Bug: search input overflow in small screens in Bootstrap

[Ana06]

I am using Bootstrap 4 and jquery-datatables 1.10.19.1. I have the following code:

<div class='row'>
  <div class='col-12 col-md-4 col-lg-3'>
    <!-- Content -->
  </div>

</div>
<div class='col-12 col-md-8 col-lg-9'>

  <table class='table table-striped table-bordered' id='involved-packages-table'>
    <thead>
      <tr>
        <th>Package</th>
        <th>Project</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <a href="/package/show/hola:Ana/ikyuikyuhkl">ikyuikyuhkl</a>
        </td>
        <td>
          <a href="/project/show/hola:Ana">hola:Ana</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Which in an screen of 950px looks like:

It seems the problem is the width in the input, which comes from this code: https://github.com/mkhairi/jquery-datatables/blob/12aa184b656f82bf1190ee1a7e796e08afafb69d/app/assets/stylesheets/datatables/dataTables.bootstrap.scss#L54

This may be related: https://github.com/DataTables/Plugins/issues/110

[mkhairi]

hi @Ana06, you should include dataTables.bootstrap4.scss instead for bootstrap4.

[Ana06]

@mkhairi That's the one I have included. Maybe my guess why this is happening is wrong, but the issue is still there.

This is my stylesheets/webui2/datatables.scss file: https://github.com/openSUSE/open-build-service/blob/master/src/api/app/assets/stylesheets/webui2/datatables.scss