Bootstrap dropdown button list hidden and full with

Hello guys I tried to implement an html table cell dropdown button to print files related to the current row and for that, I chose the bootstrap button. That button is on the last position in the row and when I click on the dropdown btn result is not shown in full width and sometimes when the list is bigger list is hidden like in the screenshot.

I try manually to set width:100% on li and also I try 100% on ul but not work.

I just want to show the list names to be shown in full width not like on the screenshot.

Output:

<td class="text-center">
   <div class="btn-group">
      <button type="button" onclick="return getProductFiles(54)" data-product-id="54" class="btn btn-secondaryr dropdown-toggle show" data-bs-toggle="dropdown" aria-expanded="true">
      <i class="fa fa-print"></i> Izaberi
      </button>
      <ul class="dropdown-menu show" id="product_files_dropdown" style="width: 100%; position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(-32px, 40px);" data-popper-placement="bottom-start">
         <li style="width:100%;"><a href="" >1667211114_Uputstvo za upotrebu Pm2012 sa pecatom.PDF</a></li>
         <li style="width:100%;"><a href="" >1667211114_Uputstvo za upotrebu pm2012 slikovno bez pecata.pdf</a></li>
      </ul>
   </div>
</td>

I populate list with ajax when user click on button

function getProductFiles(product_id) {
        var self = product_id;

        $.ajax({
            type: "GET",
            url: '/admin/proizvod/ajax?product_files=' + self,

            success: function(result) {
                // $(".testn").html(result);
                console.log(JSON.parse(result));

                var json = JSON.parse(result);
                $('#product_files_dropdown').empty('');

                for (var i in json) {
                    var li = $('<li style="width:100%; border-bottom: 1px solid #333">');

                    li.append($('<a href="" id=' + json[i].Id + '>').html(json[i].name));

                    $('</li>');
                    $("#product_files_dropdown").append(li);
                }
            },
            error: function(xhr, status, err) {
                alert(err.toString(), 'Error - LoadListItemsHelper');
            },
            complete: function(result, jqXHR, status) {
                $(".loader").fadeOut();
            }
        });
    }

Does anyone have any idea how to do this? Thanks

The dropdown appears to work correctly by simply following the Bootstrap examples. The custom styles applied over Bootstrap are causing the problem.

function getProductFiles(n) {
  // placeholder
}

<div class="row">
<div class="col">

<table class="table table-sm table-bordered">
 <thead><tr><th>A</th><th>Opcije</th><th>Stampanje</th></tr></thead>
  <tbody>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>
        <div class="dropdown">
          <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
     Izaberi
  </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <a class="dropdown-item" href="#">1667211114_Uputstvo za upotrebu Pm2012 sa pecatom.PDF</a>
            <a class="dropdown-item" href="#">1667211114_Uputstvo za upotrebu pm2012 slikovno bez pecata.pdf</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

</div>
<div class="col">
  <div class="alert alert-success" style="min-height:10rem;">
  Some other text here
  </div>
</div>
</div>


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>