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

Chore: Upgraded some packages

overlord/src/app/role/role-detail/role-detail.component.html

@@ -1,18 +1,12 @@
-<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
-  <mat-card fxFlex>
+<div class="flex flex-auto flex-row justify-around content-center items-center lg:max-w-[50%]">
+  <mat-card class="flex-auto">
     <mat-card-title-group>
       <mat-card-title>Role</mat-card-title>
     </mat-card-title-group>
     <mat-card-content>
-      <form [formGroup]="form" fxLayout="column">
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
+      <form [formGroup]="form" class="flex flex-col">
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-form-field class="flex-auto">
             <mat-label>Name</mat-label>
             <input matInput #nameElement placeholder="Name" formControlName="name" />
           </mat-form-field>
@@ -20,16 +14,11 @@
         <mat-divider></mat-divider>
         <div formArrayName="permissions">
           <div
-            fxLayout="row"
+            class="flex flex-row justify-around content-start items-start"
             *ngFor="let p of item.permissions; index as i"
             [formGroupName]="i"
-            fxLayout="row"
-            fxLayoutAlign="space-around start"
-            fxLayout.lt-md="column"
-            fxLayoutGap="20px"
-            fxLayoutGap.lt-md="0px"
           >
-            <mat-checkbox formControlName="permission" fxFlex>{{ p.name }}</mat-checkbox>
+            <mat-checkbox formControlName="permission" class="flex-auto">{{ p.name }}</mat-checkbox>
           </div>
         </div>
       </form>