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

Chore: Upgraded some packages

overlord/src/app/closing-stock/closing-stock.component.html

@@ -6,15 +6,9 @@
     </button>
   </mat-card-title-group>
   <mat-card-content>
-    <form [formGroup]="form" fxLayout="column">
-      <div
-        fxLayout="row"
-        fxLayout.lt-md="column"
-        fxLayoutGap="20px"
-        fxLayoutGap.lt-md="0px"
-        fxLayoutAlign="space-around start"
-      >
-        <mat-form-field fxFlex="60">
+    <form [formGroup]="form" class="flex flex-col">
+      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+        <mat-form-field class="flex-auto basis-2/5 mr-5">
           <mat-label>Department</mat-label>
           <mat-select formControlName="costCentre" name="costCentre">
             <mat-option *ngFor="let at of costCentres" [value]="at.id">
@@ -22,7 +16,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex="40">
+        <mat-form-field class="flex-auto basis-2/5 mr-5">
           <input
             matInput
             [matDatepicker]="dateInput"
@@ -34,7 +28,9 @@
           <mat-datepicker-toggle matSuffix [for]="dateInput"></mat-datepicker-toggle>
           <mat-datepicker #dateInput></mat-datepicker>
         </mat-form-field>
-        <button mat-raised-button color="primary" (click)="show()">Show</button>
+        <button mat-raised-button color="primary" (click)="show()" class="flex-auto basis-1/5">
+          Show
+        </button>
       </div>
       <mat-table
         #table
@@ -69,7 +65,7 @@
         <ng-container matColumnDef="physical">
           <mat-header-cell *matHeaderCellDef class="middle">Physical Stock</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-            <mat-form-field fxFlex="100%">
+            <mat-form-field class="flex-auto max-w-[100%]">
               <mat-label>Physical</mat-label>
               <input
                 matInput
@@ -94,7 +90,7 @@
         <ng-container matColumnDef="department">
           <mat-header-cell *matHeaderCellDef class="middle">Department</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-            <mat-form-field fxFlex="100%">
+            <mat-form-field class="flex-auto max-w-[100%]">
               <mat-label>Department</mat-label>
               <mat-select
                 formControlName="costCentre"

overlord/src/app/closing-stock/closing-stock.module.ts

@@ -2,7 +2,6 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import { MatButtonModule } from '@angular/material/button';
@@ -45,7 +44,6 @@ export const MY_FORMATS = {
     A11yModule,
     CommonModule,
     CdkTableModule,
-    FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,