fix: TT-139 Reduce the left margin on coutome page

Author: jr-98

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

@@ -1,23 +1,23 @@
 <table
   *ngIf="customers"
-  class="table table-sm table-bordered table-striped mb-0"
+  class="table table-responsive-sm table-bordered table-striped mb-0"
   datatable
   [dtTrigger]="dtTrigger"
   [dtOptions]="dtOptions"
 >
   <thead class="thead-blue">
     <tr class="d-flex">
-      <th class="col-4">Customer ID</th>
-      <th class="col-5">Name</th>
-      <th class="col-3 text-center">Options</th>
+      <th class="col-sm-4">Customer ID</th>
+      <th class="col-sm-5">Name</th>
+      <th class="col-sm-3 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-sm-4">{{ customer.id }}</td>
-      <td class="col-sm-5">{{ customer.name }}</td>
-      <td class="col-sm-3 text-center">
+      <td class="col col-sm-4">{{ customer.id }}</td>
+      <td class="col col-sm-5">{{ customer.name }}</td>
+      <td class="col col-sm-3 text-center">
         <button
           (click)="editCustomer(customer.id)"
           type="button"

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

@@ -40,16 +40,16 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
 
   ngOnInit(): void {
     this.dtOptions = {
-      scrollY: '290px',
+      scrollY: '325px',
       paging: false,
+      responsive: true,
     };
     this.loadCustomersSubscription = this.actionsSubject$
       .pipe(filter((action: any) => action.type === CustomerManagementActionTypes.LOAD_CUSTOMERS_SUCCESS))
       .subscribe((action) => {
         this.customers = action.payload;
         this.rerenderDataTable();
       });
-
     this.changeCustomerSubscription = this.actionsSubject$
       .pipe(
         filter(
@@ -109,4 +109,5 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
     this.message = `Are you sure you want to delete ${item.name}?`;
     this.showModal = true;
   }
+
 }

src/app/modules/customer-management/pages/customer.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container-fluid px-0 full-height">
   <div class="row">
     <div style="padding: 15px;">
       <button (click)="activateCustomerForm()" class="btn btn-primary">Add new customer</button>