WEB-735 refactor(products-mix): rearrange layout - restricted above allowed

src/app/products/products-mix/view-product-mix/view-product-mix.component.html

@@ -6,14 +6,41 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="product-mix-row">
+<div class="layout-row align-end container m-b-20 gap-12px">
-  <div class="mat-elevation-z8 inline-table">
+  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_PRODUCTMIX'">
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Edit' | translate }}
+  </button>
+  <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_PRODUCTMIX'">
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Delete' | translate }}
+  </button>
+</div>
+
+<div class="layout-column gap-20px container">
+  <div class="mat-elevation-z8">
+    <table mat-table [dataSource]="restrictedProductsDatasource" matSort>
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Restricted products' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let product">{{ product.name }}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="restrictedProductsDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: restrictedProductsDisplayedColumns"></tr>
+    </table>
+
+    <mat-paginator #restricted [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  </div>
+
+  <div class="mat-elevation-z8">
     <table mat-table [dataSource]="allowedProductsDatasource" matSort>
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'customWidthClass'">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
           {{ 'labels.inputs.Allowed Products' | translate }}
         </th>
-        <td mat-cell *matCellDef="let product" [ngClass]="'customWidthClass'">{{ product.name }}</td>
+        <td mat-cell *matCellDef="let product">{{ product.name }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="allowedProductsDisplayedColumns"></tr>
@@ -22,31 +49,4 @@
 
     <mat-paginator #allowed [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
   </div>
-  <div class="restricted-products-col">
-    <div class="action-buttons">
-      <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_PRODUCTMIX'">
-        <fa-icon icon="edit" class="m-r-10"></fa-icon>
-        {{ 'labels.buttons.Edit' | translate }}
-      </button>
-      <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_PRODUCTMIX'">
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>
-        {{ 'labels.buttons.Delete' | translate }}
-      </button>
-    </div>
-    <div class="mat-elevation-z8 inline-table restricted-products-box">
-      <table mat-table [dataSource]="restrictedProductsDatasource" matSort>
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header>
-            {{ 'labels.inputs.Restricted products' | translate }}
-          </th>
-          <td mat-cell *matCellDef="let product">{{ product.name }}</td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="restrictedProductsDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: restrictedProductsDisplayedColumns"></tr>
-      </table>
-
-      <mat-paginator #restricted [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-    </div>
-  </div>
 </div>

src/app/products/products-mix/view-product-mix/view-product-mix.component.scss

@@ -6,50 +6,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-.allowed-products-align {
+table {
-  margin-top: 19px;
-}
-
-.product-mix-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 32px;
-  justify-content: center;
   width: 100%;
 }
-
-.restricted-products-col {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  min-width: 340px;
-  justify-content: flex-start;
-}
-
-.action-buttons-wrapper {
-  width: 45%;
-  margin-left: auto;
-  margin-bottom: 8px;
-}
-
-.restricted-products-box {
-  position: relative;
-}
-
-.action-buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.container {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-evenly;
-
-  .inline-table {
-    display: inline-block;
-    width: 45%;
-  }
-}

src/app/products/products-mix/view-product-mix/view-product-mix.component.ts

@@ -31,7 +31,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 import { TranslateService } from '@ngx-translate/core';
 import { ProductsService } from 'app/products/products.service';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { NgClass } from '@angular/common';
+
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
@@ -50,7 +50,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     MatHeaderCellDef,
     MatHeaderCell,
     MatSortHeader,
-    NgClass,
     MatCellDef,
     MatCell,
     MatHeaderRowDef,