(fix): Alignment of buttons and boxes missing on Clients, Groups and Centers page

src/app/groups/groups.component.html

@@ -1,24 +1,24 @@
 <mat-card class="container">
-  <div class="layout-row align-start-center">
-    <div class="search-box">
-      <mat-form-field>
+  <div class="layout-column layout-gt-sm-row align-gt-sm-start-center">
+    <div class="search-box m-r-30">
+      <mat-form-field class="search-box">
         <input matInput placeholder="Search by Name" [formControl]="name" />
       </mat-form-field>
-      <mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()">{{
+      <mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()" class="m-r-10">{{
         'labels.inputs.Show Closed Groups' | translate
       }}</mat-checkbox>
     </div>
     <div class="action-button gap-25px">
       <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Groups']">
-        <fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Group' | translate }}
+        <fa-icon icon="download" class="m-r-20"></fa-icon>{{ 'labels.buttons.Import Group' | translate }}
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GROUP'">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Create Group' | translate }}
+        <fa-icon icon="plus" class="m-r-20"></fa-icon>{{ 'labels.buttons.Create Group' | translate }}
       </button>
     </div>
   </div>
 
-  <table mat-table [dataSource]="dataSource" matSort>
+  <table mat-table [dataSource]="dataSource" matSort class="bordered-table">
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
       <td mat-cell *matCellDef="let group">{{ group.name }}</td>

src/app/groups/groups.component.scss

@@ -1,16 +1 @@
-.container {
-  .action-button {
-    margin-left: auto;
-  }
-
-  .search-button {
-    min-width: 30px;
-    margin: 4px;
-  }
-}
-
-table {
-  tr.select-row:hover {
-    cursor: pointer;
-  }
-}
+@use '../shared/styles/list-layout' as *;