Table Column overflow the border and looks weird

Question

I am using AdminLte-3.1 in Angular

The last two columns

<th scope="col">Created Date</th>
<th scope="col">Amount</th>

and

<td>{{ transaction?.createDt | date : "dd-MMM-yyyy" || "N/A" }}</td>
<td style="text-align: right">{{ transaction?.amount | currency : "N" || "N/A" }}</td>

spill over, and it makes it look weird

Kindly help resolve it

dashboard.html:

<div class="row">
  <section class="col-md-12 connectedSortable">
    <div class="card card-danger">
      <div class="card-header border-transparent">
        <h3 class="card-title">Latest Transactions</h3>
        <div class="card-tools">
          <button
            type="button"
            class="btn btn-tool"
            data-card-widget="collapse"
          >
            <i class="fas fa-minus"></i>
          </button>
        </div>
      </div>
      <!-- /.card-header -->
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-striped table-bordered table-hover m-0">
            <thead>
              <tr>
                <th scope="col">Merchant</th>
                <th scope="col">Account No.</th>
                <th scope="col">Session ID</th>
                <th scope="col">Description</th>
                <th scope="col">Channel Name</th>
                <th scope="col">Created Date</th>
                <th scope="col">Amount</th>
              </tr>
            </thead>
            <tbody *ngIf="latestTransactionList != undefined">
              <tr
                *ngFor="
                  let transaction of latestTransactionList;
                  let i = index
                "
              >
                <td>{{ transaction?.aggregatorId || "N/A" }}</td>
                <td>{{ transaction?.acctNo || "N/A" }}</td>
                <td>{{ transaction?.transactionId || "N/A" }}</td>
                <td>{{ transaction?.description || "N/A" }}</td>
                <td>{{ transaction?.channelName || "N/A" }}</td>
                <td>
                  {{
                    transaction?.createDt | date : "dd-MMM-yyyy" || "N/A"
                  }}
                </td>
                <td style="text-align: right">
                  {{ transaction?.amount | currency : "N" || "N/A" }}
                </td>
              </tr>
              <tr *ngIf="latestTransactionList.length == 0">
                <td
                  style="text-align: center; font-weight: bold"
                  colspan="7"
                >
                  No Data Found!
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="card-footer clearfix">
        <a
          [routerLink]="['/admin-dashboard/transactions-by-created-date']"
          class="btn btn-sm btn-secondary float-right"
          ><i class="fas fa-search"></i> View All Transactions</a
        >
      </div>
    </div>
  </section>
</div>