From 7d5235d615ed960114719dee3127df24b7317b26 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 14 Oct 2024 13:00:40 +0300
Subject: [PATCH] Flex layout replacements. Switch to tailwind.css.

---
 .../queue/queue-form.component.html           | 38 +++++++++---------
 .../relation/relation-dialog.component.html   |  8 ++--
 .../relation/relation-filters.component.html  |  4 +-
 .../relation/relation-table.component.html    | 31 +++++++-------
 .../rule-chain-autocomplete.component.html    |  2 +-
 ...-sms-provider-configuration.component.html | 14 +++----
 .../vc/auto-commit-settings.component.html    | 38 +++++++++---------
 .../vc/complex-version-create.component.html  | 18 ++++-----
 .../vc/complex-version-load.component.html    | 12 +++---
 ...entity-types-version-create.component.html | 40 +++++++++----------
 .../entity-types-version-load.component.html  | 34 ++++++++--------
 .../vc/entity-version-create.component.html   | 12 +++---
 .../vc/entity-version-diff.component.html     | 17 ++++----
 .../vc/entity-version-restore.component.html  | 10 ++---
 .../vc/entity-versions-table.component.html   | 38 +++++++++---------
 ...move-other-entities-confirm.component.html |  2 +-
 .../vc/repository-settings.component.html     | 24 +++++------
 ui-ngx/tailwind.config.js                     |  3 ++
 18 files changed, 172 insertions(+), 173 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
index 38e2860cd5..26c74a5a34 100644
--- a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
+++ b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form [formGroup]="queueFormGroup" fxLayout="column">
+<form [formGroup]="queueFormGroup" class="flex flex-col">
   <mat-form-field class="mat-block" appearance="fill">
     <mat-label translate>admin.queue-name</mat-label>
     <input matInput formControlName="name" required>
@@ -37,10 +37,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px" formGroupName="submitStrategy">
-          <div fxFlex>
+        <div class="flex-1 flex flex-row lt-md:flex-col gap-4" formGroupName="submitStrategy">
+          <div class="flex-1">
             <label class="group-label" translate>queue.submit-strategy</label>
-            <mat-radio-group fxFlex fxLayout="column" formControlName="type" required>
+            <mat-radio-group class="flex-1 flex flex-col" formControlName="type" required>
               <mat-radio-button *ngFor="let strategy of submitStrategies" [value]="strategy">
                 {{ queueSubmitStrategyTypesMap.get(queueSubmitStrategyTypes[strategy]).label | translate }}
                 <mat-icon
@@ -51,7 +51,7 @@
               </mat-radio-button>
             </mat-radio-group>
           </div>
-          <div fxFlex *ngIf="hideBatchSize">
+          <div class="flex-1" *ngIf="hideBatchSize">
             <label class="group-label" translate>queue.grouping-parameter</label>
             <mat-form-field class="mat-block">
               <mat-label translate>queue.batch-size</mat-label>
@@ -75,10 +75,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px" formGroupName="processingStrategy">
-          <div fxFlex>
+        <div class="flex-1 flex flex-row lt-md:flex-col gap-4" formGroupName="processingStrategy">
+          <div class="flex-1">
             <label class="group-label" translate>queue.processing-strategy</label>
-              <mat-radio-group fxFlex fxLayout="column" formControlName="type" required>
+              <mat-radio-group class="flex-1 flex flex-col" formControlName="type" required>
                 <mat-radio-button *ngFor="let strategy of processingStrategies" [value]="strategy">
                   {{ queueProcessingStrategyTypesMap.get(queueProcessingStrategyTypes[strategy]).label | translate }}
                   <mat-icon
@@ -89,7 +89,7 @@
                 </mat-radio-button>
               </mat-radio-group>
           </div>
-          <div fxFlex>
+          <div class="flex-1">
             <label class="group-label" translate>queue.retries-settings</label>
             <mat-form-field class="mat-block" subscriptSizing="dynamic">
               <mat-label translate>queue.retries</mat-label>
@@ -156,11 +156,11 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="column" fxLayoutGap="10px">
-          <div fxFlex>
+        <div class="flex-1 flex flex-col gap-2.5">
+          <div class="flex-1">
             <label class="group-label" translate>queue.batch-processing</label>
-            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex-1 flex flex-row xs:flex-col gap-2.5">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.poll-interval</mat-label>
                 <input type="number" matInput formControlName="pollInterval" required>
                 <mat-error *ngIf="queueFormGroup.get('pollInterval').hasError('required')">
@@ -171,7 +171,7 @@
                   {{ 'queue.poll-interval-min-value' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.partitions</mat-label>
                 <input type="number" matInput formControlName="partitions" required>
                 <mat-error *ngIf="queueFormGroup.get('partitions').hasError('required')">
@@ -184,13 +184,13 @@
               </mat-form-field>
             </div>
           </div>
-          <div fxFlex>
+          <div class="flex-1">
             <label class="group-label" translate>queue.immediate-processing</label>
-            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px">
-              <mat-checkbox fxFlex fxFlexAlign.gt-xs="center" formControlName="consumerPerPartition">
+            <div class="flex-1 flex flex-row xs:flex-col gap-2.5">
+              <mat-checkbox class="flex-1 gt-xs:flex gt-xs:justify-center gt-xs:items-stretch" formControlName="consumerPerPartition">
                 {{ 'queue.consumer-per-partition' | translate }}
               </mat-checkbox>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.processing-timeout</mat-label>
                 <input type="number" matInput formControlName="packProcessingTimeout" required>
                 <mat-error *ngIf="queueFormGroup.get('packProcessingTimeout').hasError('required')">
@@ -208,7 +208,7 @@
     </mat-expansion-panel>
   </mat-accordion>
   <div formGroupName="additionalInfo">
-    <mat-checkbox fxFlex formControlName="duplicateMsgToAllPartitions" style="padding-bottom: 16px;">
+    <mat-checkbox class="flex-1" formControlName="duplicateMsgToAllPartitions" style="padding-bottom: 16px;">
       {{ 'queue.duplicate-msg-to-all-partitions' | translate }}
     </mat-checkbox>
     <mat-form-field class="mat-block" subscriptSizing="dynamic">
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
index 435f5a42ee..b6bb288b9f 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form [formGroup]="relationFormGroup" (ngSubmit)="save()" style="min-width: 600px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ (isAdd ? 'relation.add' : 'relation.edit' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -51,8 +51,8 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
+  <div mat-dialog-actions class="flex flex-row">
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
index 6973a6a32d..7ca3705364 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
@@ -52,8 +52,8 @@
           </button>
         </div>
       </div>
-      <div [fxShow]="!relationFiltersFormArray.length">
-        <span fxLayoutAlign="center center" class="tb-prompt" translate>relation.any-relation</span>
+      <div [class.!hidden]="relationFiltersFormArray.length">
+        <span class="tb-prompt flex justify-center items-center" translate>relation.any-relation</span>
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
index 5be9f4932c..08002e6e0f 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-entity-table-content tb-outlined-border">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
+  <div class="tb-entity-table-content tb-outlined-border flex-1 flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+        <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
           <span class="tb-entity-table-title">
             {{(direction == directions.FROM ? 'relation.from-relations' : 'relation.to-relations') | translate}}
           </span>
@@ -33,7 +33,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button [disabled]="isLoading$ | async"
                 (click)="addRelation($event)"
                 matTooltip="{{ 'action.add' | translate }}"
@@ -52,14 +52,14 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -72,8 +72,8 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
-      <div class="mat-toolbar-tools" fxLayoutAlign="space-between center">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
+      <div class="mat-toolbar-tools flex justify-between items-center">
         <span class="tb-entity-table-info">
           {{ 'relation.selected-relations' | translate:{count: dataSource.selection.selected.length} }}
         </span>
@@ -85,7 +85,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="dataSource"
                  matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
@@ -140,7 +140,7 @@
           <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
           </mat-header-cell>
           <mat-cell *matCellDef="let relation">
-            <div fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div class="flex-1 flex flex-row justify-end items-stretch">
               <button mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'relation.edit' | translate }}"
                       matTooltipPosition="above"
@@ -156,14 +156,13 @@
             </div>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row [ngClass]="{'mat-row-select': true,
-                             'mat-selected': dataSource.selection.isSelected(relation)}"
+        <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+        <mat-row class="mat-row-select"
+                 [class.mat-selected]="dataSource.selection.isSelected(relation)"
                  *matRowDef="let relation; columns: displayedColumns;" (click)="dataSource.selection.toggle(relation)"></mat-row>
       </table>
-      <span [fxShow]="dataSource.isEmpty() | async"
-            fxLayoutAlign="center center"
-            class="no-data-found" translate>{{ 'relation.no-relations-text' }}</span>
+      <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
+            class="no-data-found flex justify-center items-center" translate>{{ 'relation.no-relations-text' }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
diff --git a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
index c74e324c26..255ad06c48 100644
--- a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
@@ -23,7 +23,7 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="ruleChainAutocomplete"
-         [fxShow]="!disabled || !selectRuleChainFormGroup.get('ruleChainId').value">
+         [class.!hidden]="disabled && selectRuleChainFormGroup.get('ruleChainId').value">
   <a *ngIf="selectRuleChainFormGroup.get('ruleChainId').value && disabled" aria-label="Open device profile" [routerLink]=ruleChainURL>
     {{ displayRuleChainFn(selectRuleChainFormGroup.get('ruleChainId').value) }}
   </a>
diff --git a/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html b/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
index 5392ce8ce8..7621f9a575 100644
--- a/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
@@ -16,8 +16,8 @@
 
 -->
 <form [formGroup]="smppSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
-  <div fxLayout="row wrap" fxLayoutGap="6px">
-    <mat-form-field fxFlex.lt-sm="100" fxFlex.gt-xs="25" class="mat-block">
+  <div class="flex flex-row flex-wrap gap-1.5">
+    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:flex-full gt-xs:max-w-25%">
       <mat-label translate>admin.smpp-provider.smpp-version</mat-label>
       <mat-select formControlName="protocolVersion">
         <mat-option *ngFor="let smppVersion of smppVersions" [value]="smppVersion.value">
@@ -25,14 +25,14 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>admin.smpp-provider.smpp-host</mat-label>
       <input required matInput formControlName="host">
       <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('host').hasError('required')">
         {{'admin.smpp-provider.smpp-host-required' | translate}}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex.lt-sm="100" fxFlex.gt-xs="25" class="mat-block">
+    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:flex-full gt-xs:max-w-25%">
       <mat-label translate>admin.smpp-provider.smpp-port</mat-label>
       <input required matInput type="number" formControlName="port">
       <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('port').hasError('required')">
@@ -40,15 +40,15 @@
       </mat-error>
     </mat-form-field>
   </div>
-  <div fxLayout="row wrap" fxLayoutGap="6px">
-    <mat-form-field fxFlex class="mat-block">
+  <div class="flex flex-row flex-wrap gap-1.5">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>admin.smpp-provider.system-id</mat-label>
       <input required matInput formControlName="systemId">
       <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('systemId').hasError('required')">
         {{'admin.smpp-provider.system-id-required' | translate}}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>admin.smpp-provider.password</mat-label>
       <input required matInput type="password" autocomplete="new-password" formControlName="password">
       <tb-toggle-password matSuffix></tb-toggle-password>
diff --git a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
index 22ab888e80..cabadf231f 100644
--- a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
@@ -21,7 +21,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.auto-commit-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="autoCommitSettings"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -31,19 +31,19 @@
       <form [formGroup]="autoCommitSettingsForm" #formDirective="ngForm" (ngSubmit)="save()">
         <fieldset class="fields-group" [disabled]="(isLoading$ | async) || (isReadOnly | async)">
           <legend class="group-title" translate>admin.auto-commit-entities</legend>
-          <div fxLayout="column">
+          <div class="flex flex-col">
             <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
                let $index = index; last as isLast;"
-                 fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-              <mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
+                 class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
+              <mat-expansion-panel class="entity-type-config flex-1" [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
                 <mat-expansion-panel-header>
-                  <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+                  <div class="flex-1 flex flex-row justify-start items-center">
                     <mat-panel-title>
-                      <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+                      <div class="flex-1 flex flex-row justify-start items-center">
                         <div [innerHTML]="entityTypeText(entityTypeFormGroup)"></div>
                       </div>
                     </mat-panel-title>
-                    <span fxFlex></span>
+                    <span class="flex-1"></span>
                     <button mat-icon-button style="min-width: 40px;"
                             type="button"
                             (click)="removeEntityType($index)"
@@ -54,10 +54,10 @@
                   </div>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
-                  <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+                  <div class="entity-type-config-content flex flex-col gap-2">
                     <mat-divider></mat-divider>
-                    <div fxLayout="column" fxLayout.gt-lg="row" fxLayoutGap.gt-lg="16px">
-                      <div fxLayout="row" fxLayoutGap="16px" fxLayout.xs="column" fxLayoutGap.xs="0px">
+                    <div class="flex flex-col gt-lg:flex-row gt-lg:gap-4">
+                      <div class="flex flex-row gap-4 xs:flex-col xs:gap-0">
                         <tb-entity-type-select
                           showLabel
                           formControlName="entityType"
@@ -73,8 +73,8 @@
                           </tb-branch-autocomplete>
                         </div>
                       </div>
-                      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"
-                           fxLayout.xs="column" fxLayoutAlign.xs="start start" fxLayoutGap.xs="0px"  formGroupName="config">
+                      <div class="flex-1 flex flex-row justify-start items-center gap-4 xs:flex-col xs:justify-start xs:items-start xs:gap-0"
+                           formGroupName="config">
                         <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
                           {{ 'version-control.export-credentials' | translate }}
                         </mat-checkbox>
@@ -91,17 +91,17 @@
               </mat-expansion-panel>
             </div>
             <div *ngIf="!entityTypesFormGroupArray().length">
-              <span translate fxLayoutAlign="center center"
-                    class="tb-prompt">admin.no-auto-commit-entities-prompt</span>
+              <span translate
+                    class="tb-prompt flex justify-center items-center">admin.no-auto-commit-entities-prompt</span>
             </div>
-            <div style="padding-top: 16px;" fxLayout="row">
+            <div style="padding-top: 16px;"  class="flex flex-row">
               <button mat-raised-button color="primary"
                       type="button"
                       [disabled]="!addEnabled()"
                       (click)="addEntityType()">
                 <span translate>version-control.add-entity-type</span>
               </button>
-              <span fxFlex></span>
+              <span class="flex-1"></span>
               <button mat-raised-button color="primary"
                       type="button"
                       [disabled]="!entityTypesFormGroupArray().length"
@@ -112,12 +112,12 @@
           </div>
         </fieldset>
         <div class="tb-hint" *ngIf="isReadOnly | async" translate>version-control.auto-commit-settings-read-only-hint</div>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
-          <button mat-raised-button color="warn" type="button" [fxShow]="settings !== null"
+        <div class="flex flex-row justify-end items-center gap-4 xs:flex-col xs:justify-end xs:items-stretch">
+          <button mat-raised-button color="warn" type="button" [class.!hidden]="!settings"
                   [disabled]="(isLoading$ | async) || (isReadOnly | async)" (click)="delete(formDirective)">
             {{'action.delete' | translate}}
           </button>
-          <span fxFlex></span>
+          <span class="flex-1"></span>
           <button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || (isReadOnly | async) || autoCommitSettingsForm.invalid || !autoCommitSettingsForm.dirty"
                   type="submit">{{'action.save' | translate}}
           </button>
diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
index 163b13a393..327620355f 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<section *ngIf="!versionCreateResult$" fxLayout="column" style="height: 100%;">
+<section *ngIf="!versionCreateResult$" class="flex flex-col" style="height: 100%;">
   <mat-toolbar>
     <h2>{{ 'version-control.create-entities-version' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
   </mat-toolbar>
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <form [formGroup]="createVersionFormGroup" fxLayout="column" style="flex: 1; padding-top: 16px; overflow: auto;">
-    <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
+  <form [formGroup]="createVersionFormGroup" class="flex flex-col" style="flex: 1; padding-top: 16px; overflow: auto;">
+    <div class="flex flex-col gt-sm:flex-row gt-sm:gap-2">
       <tb-branch-autocomplete
-        fxFlex
+        class="flex-1"
         required
         formControlName="branch">
       </tb-branch-autocomplete>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>version-control.version-name</mat-label>
         <input required matInput formControlName="versionName">
         <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
@@ -52,7 +52,7 @@
       formControlName="entityTypes">
     </tb-entity-types-version-create>
   </form>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px" style="padding-top: 16px;">
+  <div class="flex justify-end items-center gap-2" style="padding-top: 16px;">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -71,7 +71,7 @@
   <section *ngIf="resultMessage">
     <div class="mat-headline-6 vc-result-message" [innerHtml]="resultMessage"></div>
   </section>
-  <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" class="flex justify-end items-center gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -80,7 +80,7 @@
     </button>
   </div>
   <ng-template #progress>
-    <section fxLayout="column" fxLayoutAlign="center center">
+    <section class="flex flex-col justify-center items-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.creating-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
index ccab83b9aa..516f10934b 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<section *ngIf="!versionLoadResult$" fxLayout="column" style="height: 100%;">
+<section *ngIf="!versionLoadResult$" class="flex flex-col" style="height: 100%;">
   <mat-toolbar>
     <h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
   </mat-toolbar>
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <form [formGroup]="loadVersionFormGroup" fxLayout="column" style="flex: 1; padding: 16px 0; overflow-y: auto; overflow-x: hidden">
+  <form [formGroup]="loadVersionFormGroup" class="flex flex-col" style="flex: 1; padding: 16px 0; overflow-y: auto; overflow-x: hidden">
     <tb-entity-types-version-load
       formControlName="entityTypes">
     </tb-entity-types-version-load>
@@ -33,7 +33,7 @@
       {{ 'version-control.rollback-on-error' | translate }}
     </mat-slide-toggle>
   </div>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px" style="padding-top: 16px;">
+  <div class="flex justify-end items-center gap-2" style="padding-top: 16px;">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -54,7 +54,7 @@
   </div>
   <div *ngIf="errorMessage" class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
   <div *ngFor="let entityTypeLoadResult of entityTypeLoadResults" class="mat-headline-6 vc-result-message">{{ entityTypeLoadResultMessage(entityTypeLoadResult) }}</div>
-  <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress"  fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress" class="flex justify-end items-center gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -63,7 +63,7 @@
     </button>
   </div>
   <ng-template #progress>
-    <section fxLayout="column" fxLayoutAlign="center center">
+    <section class="flex flex-col justify-center items-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.restoring-entities-from-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
index c237d2291a..c988746e48 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<fieldset [formGroup]="entityTypesVersionCreateFormGroup" class="fields-group" fxLayout="column">
+<fieldset [formGroup]="entityTypesVersionCreateFormGroup" class="fields-group flex flex-col">
   <legend class="group-title" translate>version-control.entities-to-export</legend>
-  <div fxLayout="column" style="flex: 1; overflow: auto;">
+  <div class="flex flex-col" style="flex: 1; overflow: auto;">
     <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
              let $index = index; last as isLast;"
-         fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-      <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
+         class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
+      <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
                            [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
         <mat-expansion-panel-header>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <div class="flex-1 flex flex-row justify-start items-center">
             <mat-panel-title>
-              <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+              <div class="flex-1 flex flex-row justify-start items-center">
                 <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
               </div>
             </mat-panel-title>
-            <span fxFlex></span>
+            <span class="flex-1"></span>
             <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
                     type="button"
                     (click)="removeEntityType($index)"
@@ -40,9 +40,9 @@
             </button>
           </div>
         </mat-expansion-panel-header>
-        <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+        <div class="entity-type-config-content flex flex-col gap-2">
           <mat-divider></mat-divider>
-          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
+          <div class="flex flex-row xs:flex-col gt-xs:gap-4">
             <tb-entity-type-select
               showLabel
               formControlName="entityType"
@@ -50,8 +50,8 @@
               [filterAllowedEntityTypes]="false"
               [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
             </tb-entity-type-select>
-            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" formGroupName="config">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4" formGroupName="config">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>version-control.sync-strategy</mat-label>
                 <mat-select formControlName="syncStrategy">
                   <mat-option [value]="'default'">
@@ -62,7 +62,7 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <div fxFlex fxLayout="column">
+              <div class="flex-1 flex flex-col">
                 <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
                   {{ 'version-control.export-credentials' | translate }}
                 </mat-checkbox>
@@ -75,14 +75,14 @@
               </div>
             </div>
           </div>
-          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutAlign.gt-xs="start center"
-               formGroupName="config" ngStyle.gt-xs="min-height: 76px;">
+          <div class="flex flex-row xs:flex-col gt-xs:gap-4 gt-xs:justify-start gt-xs:items-center gt-xs:min-h-19"
+               formGroupName="config">
             <mat-slide-toggle formControlName="allEntities">
               {{ 'version-control.all-entities' | translate }}
             </mat-slide-toggle>
             <tb-entity-list
-              fxFlex
-              [fxShow]="!entityTypeFormGroup.get('config').get('allEntities').value"
+              class="flex-1"
+              [class.!hidden]="entityTypeFormGroup.get('config').get('allEntities').value"
               [entityType]="entityTypeFormGroup.get('entityType').value"
               required
               formControlName="entityIds">
@@ -92,18 +92,18 @@
       </mat-expansion-panel>
     </div>
     <div *ngIf="!entityTypesFormGroupArray().length">
-          <span translate fxLayoutAlign="center center"
-                class="tb-prompt">version-control.no-entities-to-export-prompt</span>
+          <span translate
+                class="tb-prompt flex justify-center items-center">version-control.no-entities-to-export-prompt</span>
     </div>
   </div>
-  <div style="padding-top: 16px;" fxLayout="row">
+  <div style="padding-top: 16px;" class="flex flex-row">
     <button mat-raised-button color="primary"
             type="button"
             [disabled]="!addEnabled()"
             (click)="addEntityType()">
       <span translate>version-control.add-entity-type</span>
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-raised-button color="primary"
             type="button"
             [disabled]="!entityTypesFormGroupArray().length"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
index 620d406132..0179c1c0f8 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<fieldset class="fields-group" [formGroup]="entityTypesVersionLoadFormGroup" fxLayout="column">
+<fieldset class="fields-group flex flex-col" [formGroup]="entityTypesVersionLoadFormGroup">
   <legend class="group-title" translate>version-control.entities-to-restore</legend>
-  <div fxLayout="column" style="flex: 1; overflow: auto;">
+  <div class="flex flex-col" style="flex: 1; overflow: auto;">
     <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
              let $index = index; last as isLast;"
-         fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-      <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
+         class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
+      <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
                            [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
         <mat-expansion-panel-header>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <div class="flex-1 flex flex-row justify-start items-center">
             <mat-panel-title>
-              <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+              <div class="flex-1 flex flex-row justify-start items-center">
                 <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
               </div>
             </mat-panel-title>
-            <span fxFlex></span>
+            <span class="flex-1"></span>
             <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
                     type="button"
                     (click)="removeEntityType($index)"
@@ -40,19 +40,19 @@
             </button>
           </div>
         </mat-expansion-panel-header>
-        <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+        <div class="entity-type-config-content flex flex-col gap-2">
           <mat-divider></mat-divider>
-          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px">
+          <div class="flex flex-row xs:flex-col gt-xs:gap-8">
             <tb-entity-type-select
-              fxFlex
+              class="flex-1"
               showLabel
               formControlName="entityType"
               required
               [filterAllowedEntityTypes]="false"
               [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
             </tb-entity-type-select>
-            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" formGroupName="config">
-              <div fxFlex fxLayout="column">
+            <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4 xs:gap-2" formGroupName="config">
+              <div class="flex-1 flex flex-col">
                 <mat-checkbox #removeOtherEntitiesCheckbox
                               formControlName="removeOtherEntities"
                               (change)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup)">
@@ -62,7 +62,7 @@
                   {{ 'version-control.find-existing-entity-by-name' | translate }}
                 </mat-checkbox>
               </div>
-              <div fxFlex fxLayout="column">
+              <div class="flex-1 flex flex-col">
                 <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
                   {{ 'version-control.load-credentials' | translate }}
                 </mat-checkbox>
@@ -79,18 +79,18 @@
       </mat-expansion-panel>
     </div>
     <div *ngIf="!entityTypesFormGroupArray().length">
-          <span translate fxLayoutAlign="center center"
-                class="tb-prompt">version-control.no-entities-to-restore-prompt</span>
+          <span translate
+                class="tb-prompt flex justify-center items-center">version-control.no-entities-to-restore-prompt</span>
     </div>
   </div>
-  <div style="padding-top: 16px;" fxLayout="row">
+  <div style="padding-top: 16px;" class="flex flex-row">
     <button mat-raised-button color="primary"
             type="button"
             [disabled]="!addEnabled()"
             (click)="addEntityType()">
       <span translate>version-control.add-entity-type</span>
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-raised-button color="primary"
             type="button"
             [disabled]="!entityTypesFormGroupArray().length"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
index f4717c2fb3..73565b07ff 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
@@ -18,19 +18,19 @@
 <section *ngIf="!versionCreateResult$">
   <mat-toolbar>
     <h2>{{ 'version-control.create-entity-version' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
   </mat-toolbar>
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <form [formGroup]="createVersionFormGroup" style="padding-top: 16px;">
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex-1 flex flex-col">
         <tb-branch-autocomplete
           required
           formControlName="branch">
         </tb-branch-autocomplete>
-        <mat-form-field class="mat-block" fxFlex>
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>version-control.version-name</mat-label>
           <input required matInput formControlName="versionName">
           <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
@@ -50,7 +50,7 @@
       </div>
     </fieldset>
   </form>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div class="flex justify-end items-center gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -69,7 +69,7 @@
   <section *ngIf="(versionCreateResult$ | async)?.done || resultMessage; else progress">
     <section *ngIf="resultMessage">
       <div class="mat-headline-6 vc-result-message">{{ resultMessage }}</div>
-      <div fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="flex justify-end items-center gap-2">
         <button mat-button color="primary"
                 type="button"
                 [disabled]="(isLoading$ | async)"
@@ -80,7 +80,7 @@
     </section>
   </section>
   <ng-template #progress>
-    <section fxLayout="column" fxLayoutAlign="center center">
+    <section class="flex flex-col justify-center items-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.creating-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
index 1c4f72e623..273207ca24 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
@@ -15,13 +15,12 @@
     limitations under the License.
 
 -->
-<section class="entity-version-diff-view" [ngClass]="{'content-ready': contentReady}"
+<section class="entity-version-diff-view flex flex-col" [class.content-ready]="contentReady"
          tb-fullscreen [fullscreen]="isFullscreen" (fullscreenChanged)="onFullscreenChanged($event)"
-         [ngStyle]="isFullscreen || !contentReady ? {} : {height: preferredDiffHeight}"
-         fxLayout="column">
+         [style]="isFullscreen || !contentReady ? {} : {height: preferredDiffHeight}">
   <mat-toolbar *ngIf="contentReady">
     <h2>{{ 'version-control.diff-entity-with-version' | translate: {versionName} }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             matTooltip="{{'version-control.previous-difference' | translate}}"
             matTooltipPosition="below"
@@ -54,14 +53,14 @@
       <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
     </button>
   </mat-toolbar>
-  <div fxLayout="row" *ngIf="contentReady">
-    <div class="version-title" fxFlex>{{ 'version-control.current' | translate }}</div>
+  <div class="flex flex-row" *ngIf="contentReady">
+    <div class="version-title flex-1">{{ 'version-control.current' | translate }}</div>
     <div style="width: 58px;"></div>
-    <div class="version-title" fxFlex>{{ versionIdContent() }}</div>
+    <div class="version-title flex-1">{{ versionIdContent() }}</div>
   </div>
   <mat-spinner *ngIf="!contentReady" mode="indeterminate" diameter="80"></mat-spinner>
-  <div fxFlex [fxShow]="contentReady" class="diff-viewer" #diffViewer></div>
-  <div class="bottom-panel" *ngIf="contentReady" fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div [class.!hidden]="!contentReady" class="diff-viewer flex-1" #diffViewer></div>
+  <div class="bottom-panel flex justify-end items-center gap-2" *ngIf="contentReady">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
index 14b1ac6b59..fa670c9ae0 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
@@ -18,7 +18,7 @@
 <section *ngIf="!versionLoadResult$">
   <mat-toolbar *ngIf="entityDataInfo">
     <h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
   </mat-toolbar>
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="entityDataInfo && (isLoading$ | async)">
@@ -26,7 +26,7 @@
   <mat-spinner *ngIf="!entityDataInfo" mode="indeterminate" diameter="80"></mat-spinner>
   <form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;">
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex-1 flex flex-col">
         <mat-checkbox *ngIf="entityDataInfo.hasCredentials" formControlName="loadCredentials" style="margin-bottom: 16px;">
           {{ 'version-control.load-credentials' | translate }}
         </mat-checkbox>
@@ -39,7 +39,7 @@
       </div>
     </fieldset>
   </form>
-  <div *ngIf="entityDataInfo"  fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div *ngIf="entityDataInfo"  class="flex justify-end items-center gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -58,7 +58,7 @@
   <section *ngIf="(versionLoadResult$ | async)?.done || errorMessage; else progress">
     <section *ngIf="errorMessage">
       <div class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
-      <div fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="flex justify-end items-center gap-2">
         <button mat-button color="primary"
                 type="button"
                 [disabled]="(isLoading$ | async)"
@@ -69,7 +69,7 @@
     </section>
   </section>
   <ng-template #progress>
-    <section fxLayout="column" fxLayoutAlign="center center">
+    <section class="flex flex-col justify-center items-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.restoring-entity-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
index 948fdb5190..b2818368e2 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div class="mat-padding tb-entity-table tb-absolute-fill" [ngClass]="{'tb-popover-mode': popoverComponent}">
-  <div fxFlex fxLayout="column" class="tb-entity-table-content" [ngClass]="{'tb-outlined-border': !popoverComponent}">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
+<div class="mat-padding tb-entity-table tb-absolute-fill" [class.tb-popover-mode]="popoverComponent">
+  <div class="tb-entity-table-content flex-1 flex flex-col" [class.tb-outlined-border]="!popoverComponent">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
       <div class="mat-toolbar-tools">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+        <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
           <span class="tb-entity-table-title">{{(singleEntityMode ? 'version-control.entity-versions' : 'version-control.versions') | translate}}</span>
           <tb-branch-autocomplete
             #branchAutocompleteComponent
@@ -31,8 +31,8 @@
             (ngModelChange)="branchChanged($event)">
           </tb-branch-autocomplete>
         </div>
-        <span fxFlex></span>
-        <div fxLayout="row" fxLayoutAlign="center center" fxLayout.xs="column" fxLayoutAlign.xs="center end">
+        <span class="flex-1"></span>
+        <div class="flex flex-row justify-center items-center xs:flex-col xs:justify-center xs:items-end">
           <button *ngIf="singleEntityMode" mat-stroked-button color="primary"
                   #createVersionButton
                   [disabled]="(isLoading$ | async) || (isReadOnly | async)"
@@ -47,7 +47,7 @@
             <mat-icon>update</mat-icon>
             {{'version-control.create-entities-version' | translate }}
           </button>
-          <div fxLayout="row">
+          <div class="flex flex-row">
             <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                     matTooltip="{{ 'action.refresh' | translate }}"
                     matTooltipPosition="above">
@@ -64,14 +64,14 @@
         </div>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -84,7 +84,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="dataSource"
              matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="timestamp">
@@ -124,11 +124,11 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef [ngStyle]="singleEntityMode ? {minWidth: '80px', maxWidth: '80px', width: '80px'} :
-                                                                           {minWidth: '40px', maxWidth: '40px', width: '40px'}">
+          <mat-header-cell *matHeaderCellDef [class.min-w-20]="singleEntityMode" [class.max-w-20]="singleEntityMode" [class.w-20]="singleEntityMode"
+                                             [class.min-w-10]="!singleEntityMode" [class.max-w-10]="!singleEntityMode" [class.w-10]="!singleEntityMode">
           </mat-header-cell>
           <mat-cell *matCellDef="let entityVersion">
-            <div fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div class="flex-1 flex flex-row justify-end items-stretch">
               <button *ngIf="singleEntityMode" mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'version-control.compare-with-current' | translate }}"
                       matTooltipPosition="above"
@@ -154,18 +154,16 @@
           </mat-cell>
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row [fxShow]="!dataSource.dataLoading" *matRowDef="let entityVersion; columns: displayedColumns;"></mat-row>
+        <mat-row [class.!hidden]="dataSource.dataLoading" *matRowDef="let entityVersion; columns: displayedColumns;"></mat-row>
       </table>
-      <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found" translate>{{
+      <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
+            class="no-data-found flex justify-center items-center" translate>{{
         singleEntityMode
           ? 'version-control.no-entity-versions-text'
           : 'version-control.no-versions-text'
         }}</span>
-      <span [fxShow]="dataSource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ 'common.loading' | translate }}</span>
+      <span [class.!hidden]="!dataSource.dataLoading"
+            class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
diff --git a/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html b/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
index ce414bdb48..15060f44bc 100644
--- a/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
@@ -24,7 +24,7 @@
       </mat-form-field>
     </fieldset>
   </form>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div class="flex justify-end items-center gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
index 2fda773889..78f12d5c20 100644
--- a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
@@ -17,18 +17,18 @@
 -->
 <div style="height: min-content; max-height: 80vh;">
   <mat-card appearance="outlined" class="repository-settings"
-            [ngClass]="{'settings-card': !detailsMode}"
-            [ngStyle]="popoverComponent ? {boxShadow: 'none', maxWidth: '100%', minWidth: '100%', width: '800px'} : {}">
+            [class.settings-card]="!detailsMode"
+            [style]="popoverComponent ? {boxShadow: 'none', maxWidth: '100%', minWidth: '100%', width: '800px'} : {}">
     <mat-card-header>
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.repository-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="repositorySettings"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="!hideLoadingBar && isLoading$ | async">
     </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="hideLoadingBar || !(isLoading$ | async)"></div>
+    <div style="height: 4px;" *ngIf="hideLoadingBar || (isLoading$ | async) === false"></div>
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="repositorySettingsForm" #formDirective="ngForm" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
@@ -43,7 +43,7 @@
             <mat-label translate>admin.default-branch</mat-label>
             <input matInput formControlName="defaultBranch">
           </mat-form-field>
-          <div fxLayout="column">
+          <div class="flex flex-col">
             <mat-checkbox formControlName="readOnly">
               {{ 'admin.repository-read-only' | translate }}
             </mat-checkbox>
@@ -53,7 +53,7 @@
           </div>
           <fieldset [disabled]="isLoading$ | async" class="fields-group">
             <legend class="group-title" translate>admin.authentication-settings</legend>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>admin.auth-method</mat-label>
               <mat-select required formControlName="authMethod">
                 <mat-option *ngFor="let method of repositoryAuthMethods" [value]="method">
@@ -61,8 +61,8 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <section [fxShow]="repositorySettingsForm.get('authMethod').value === repositoryAuthMethod.USERNAME_PASSWORD" fxLayout="column">
-              <mat-form-field fxFlex class="mat-block">
+            <section [class.!hidden]="repositorySettingsForm.get('authMethod').value !== repositoryAuthMethod.USERNAME_PASSWORD" class="flex flex-col">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>common.username</mat-label>
                 <input matInput formControlName="username" placeholder="{{ 'common.enter-username' | translate }}"
                        autocomplete="new-username"/>
@@ -79,7 +79,7 @@
                 <mat-hint [innerHTML] = "'admin.auth-method-username-password-hint' | translate"></mat-hint>
               </mat-form-field>
             </section>
-            <section [fxShow]="repositorySettingsForm.get('authMethod').value === repositoryAuthMethod.PRIVATE_KEY" fxLayout="column">
+            <section [class.!hidden]="repositorySettingsForm.get('authMethod').value !== repositoryAuthMethod.PRIVATE_KEY" class="flex flex-col">
               <tb-file-input [existingFileName]="repositorySettingsForm.get('privateKeyFileName').value"
                              required
                              formControlName="privateKey"
@@ -99,12 +99,12 @@
               </mat-form-field>
             </section>
           </fieldset>
-          <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
-            <button mat-raised-button color="warn" type="button" [fxShow]="settings !== null"
+          <div class="flex flex-row justify-end items-center gap-4 xs:flex-col xs:justify-end xs:items-stretch">
+            <button mat-raised-button color="warn" type="button" [class.!hidden]="!settings"
                     [disabled]="(isLoading$ | async)" (click)="delete(formDirective)">
               {{'action.delete' | translate}}
             </button>
-            <span fxFlex></span>
+            <span class="flex-1"></span>
             <button mat-raised-button type="button"
                     [disabled]="(isLoading$ | async) || repositorySettingsForm.invalid" (click)="checkAccess()">
               {{'admin.check-access' | translate}}
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index 6135c8fc9a..fa7b2f8798 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -86,6 +86,9 @@ module.exports = {
       gap: {
         '0.75': '0.1875rem'
       },
+      minHeight: {
+        '19': '4.75rem'
+      },
       minWidth: {
         '25': '6.25rem',
         '37.5': '9.375rem'