fix: TT-139 Resolved the cometaries on GitHub about identation and bootstrap

Author: jr-98

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html

@@ -1,44 +1,44 @@
-<div class="table table-responsive">
+<div class="table-responsive-sm">
   <table
-  *ngIf="customers"
-class="table table-bordered table-striped"
-  datatable
-  [dtTrigger]="dtTrigger"
-  [dtOptions]="dtOptions"
->
-  <thead class="thead-blue">
-    <tr class="d-flex">
-      <th class="col-5 text-center">Customer ID</th>
-      <th class="col-3 text-center">Name</th>
-      <th class="col-4 text-center">Options</th>
-    </tr>
-  </thead>
-  <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
-  <tbody *ngIf="((isLoading$ | async) === false)">
-    <tr class="d-flex" *ngFor="let customer of customers">
-      <td class="col-5">{{ customer.id }}</td>
-      <td class="col-3">{{ customer.name }}</td>
-      <td class="col-4 text-center">
-        <button
-          (click)="editCustomer(customer.id)"
-          type="button"
-          class="btn btn-sm btn-primary"
-        >
-          <i class="fa fa-pencil fa-xs"></i>
-        </button>
-        <button
-          data-toggle="modal"
-          data-target="#deleteModal"
-          (click)="openModal(customer)"
-          type="button"
-          class="btn btn-sm btn-danger ml-2"
-        >
-          <i class="fa fa-trash-alt fa-xs"></i>
-        </button>
-      </td>
-    </tr>
-  </tbody>
-</table>
+    *ngIf="customers"
+    class="table table-bordered table-striped mb-0"
+    datatable
+    [dtTrigger]="dtTrigger"
+    [dtOptions]="dtOptions"
+  >
+    <thead class="thead-blue">
+      <tr class="d-flex">
+        <th class="col-5 text-center">Customer ID</th>
+        <th class="col-3 text-center">Name</th>
+        <th class="col-4 text-center">Options</th>
+      </tr>
+    </thead>
+    <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
+    <tbody *ngIf="((isLoading$ | async) === false)">
+      <tr class="d-flex" *ngFor="let customer of customers">
+        <td class="col-5 text-break">{{ customer.id }}</td>
+        <td class="col-3 text-break">{{ customer.name }}</td>
+        <td class="col-4 text-center">
+          <button
+            (click)="editCustomer(customer.id)"
+            type="button"
+            class="btn btn-sm btn-primary"
+          >
+            <i class="fa fa-pencil fa-xs"></i>
+          </button>
+          <button
+            data-toggle="modal"
+            data-target="#deleteModal"
+            (click)="openModal(customer)"
+            type="button"
+            class="btn btn-sm btn-danger ml-2"
+          >
+            <i class="fa fa-trash-alt fa-xs"></i>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 <app-dialog

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss

@@ -1,4 +1 @@
-.col-3 .col-4 .col-5 {
-  padding: 1rem 0rem 2rem;
-  overflow: hidden;
-}
+