Chore: Removed @angular/flex-layout and replaced it with tailwind.

Chore: Upgraded some packages

overlord/src/app/product/product-detail/product-detail-dialog.component.html

@@ -2,25 +2,21 @@
 <div mat-dialog-content>
   <form [formGroup]="form">
     <div
-      fxLayout="row wrap"
-      fxLayoutAlign="space-around start"
-      fxLayout.lt-md="column"
-      fxLayoutGap="20px"
-      fxLayoutGap.lt-md="0px"
+      class="flex flex-row flex-wrap justify-around content-start items-start sm:max-lg:flex-col"
     >
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-auto mr-5">
         <mat-label>Units</mat-label>
         <input matInput placeholder="Units" formControlName="units" />
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-auto mr-5">
         <mat-label>Fraction</mat-label>
         <input matInput type="number" placeholder="Fraction" formControlName="fraction" />
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-auto mr-5">
         <mat-label>Yield</mat-label>
         <input matInput type="number" placeholder="Yield" formControlName="productYield" />
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-auto mr-5">
         <mat-label>{{ data.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
         <input
           matInput
@@ -29,7 +25,7 @@
           formControlName="costPrice"
         />
       </mat-form-field>
-      <mat-form-field fxFlex [hidden]="!data.isSold">
+      <mat-form-field class="flex-auto" [hidden]="!data.isSold">
         <mat-label>Sale Price</mat-label>
         <input matInput type="number" placeholder="Sale Price" formControlName="salePrice" />
       </mat-form-field>