From 2626b56d45f2eb1e29fb8c5d4d3b4e0f42837069 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 17 Oct 2024 10:43:29 +0300
Subject: [PATCH] Flex layout replacements. Switch to tailwind.css.

---
 .../alarm-assignee-select.component.html      | 10 ++---
 .../alarm/alarm-table.component.html          |  2 +-
 .../audit-log/audit-log-table.component.html  |  2 +-
 .../dashboard-toolbar.component.html          |  3 +-
 .../filter/filter-text.component.html         |  2 +-
 .../device-profile-alarms.component.html      |  2 +-
 .../rate-limits-text.component.html           |  2 +-
 .../widget/lib/legend.component.html          | 13 ++++---
 .../action/mobile-action-editor.models.ts     | 10 ++---
 .../common/background-settings.component.html |  2 +-
 .../color-range-settings.component.html       |  2 +-
 .../common/color-settings.component.html      |  2 +-
 .../widget/widget-container.component.html    | 20 +++++-----
 .../widget/widget-container.component.ts      |  8 ++--
 .../backup-code-auth-dialog.component.html    | 12 +++---
 .../email-auth-dialog.component.html          | 16 ++++----
 .../sms-auth-dialog.component.html            | 16 ++++----
 .../totp-auth-dialog.component.html           | 16 ++++----
 .../home/pages/tenant/tenant.component.html   | 24 ++++++------
 .../activation-link-dialog.component.html     | 10 ++---
 .../pages/user/add-user-dialog.component.html |  4 +-
 .../home/pages/user/user.component.html       | 38 +++++++++----------
 .../save-widget-type-as-dialog.component.html |  4 +-
 .../select-widget-type-dialog.component.html  |  6 +--
 .../pages/widget/widget-editor.component.html | 35 +++++++++--------
 .../pages/widget/widget-type.component.html   | 16 ++++----
 .../widgets-bundle-dialog.component.html      |  4 +-
 .../widgets-bundle-widgets.component.html     |  4 +-
 .../widget/widgets-bundle.component.html      | 14 +++----
 ui-ngx/tailwind.config.js                     |  1 +
 30 files changed, 150 insertions(+), 150 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html
index 903b473dbe..8ef4044dac 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html
@@ -16,16 +16,16 @@
 
 -->
 <ng-container [formGroup]="assigneeFormGroup">
-  <mat-form-field [ngStyle]="inline ? {width: '100%'} : {marginBottom: '25px'}"
+  <mat-form-field [style]="inline ? {width: '100%'} : {marginBottom: '25px'}"
                   (click)="openAlarmAssigneeSelectPanel($event)"
                   subscriptSizing="dynamic" [appearance]="inline ? 'outline' : 'fill'">
     <mat-label *ngIf="!inline" translate>alarm.assignee</mat-label>
     <input matInput readonly formControlName="assignee">
-    <span *ngIf="assignee" matPrefix class="user-avatar" [ngClass]="{'inline': inline}"
-          [style.backgroundColor]="getAvatarBgColor()">
+    <span *ngIf="assignee" matPrefix class="user-avatar" [class.inline]="inline"
+          [style.background-color]="getAvatarBgColor()">
       {{ getUserInitials() }}
     </span>
-    <mat-icon *ngIf="!assignee" matPrefix class="unassigned-icon" [ngClass]="{'inline': inline}">account_circle</mat-icon>
-    <mat-icon *ngIf="!disabled" matSuffix class="drop-down-icon" [ngClass]="{'inline': inline}">arrow_drop_down</mat-icon>
+    <mat-icon *ngIf="!assignee" matPrefix class="unassigned-icon" [class.inline]="inline">account_circle</mat-icon>
+    <mat-icon *ngIf="!disabled" matSuffix class="drop-down-icon" [class.inline]="inline">arrow_drop_down</mat-icon>
   </mat-form-field>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.html
index bec2c21de5..df86e9a08b 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.html
@@ -15,4 +15,4 @@
     limitations under the License.
 
 -->
-<tb-entities-table [entitiesTableConfig]="alarmTableConfig" [ngClass]="{'tb-details-mode': detailsMode}"></tb-entities-table>
+<tb-entities-table [entitiesTableConfig]="alarmTableConfig" [class.tb-details-mode]="detailsMode"></tb-entities-table>
diff --git a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.html b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.html
index b6b6073567..fc4f12d37a 100644
--- a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.html
@@ -15,4 +15,4 @@
     limitations under the License.
 
 -->
-<tb-entities-table [entitiesTableConfig]="auditLogTableConfig" [ngClass]="{'tb-details-mode': detailsMode}"></tb-entities-table>
+<tb-entities-table [entitiesTableConfig]="auditLogTableConfig" [class.tb-details-mode]="detailsMode"></tb-entities-table>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html
index 6878ce8113..3b4a66112a 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html
@@ -16,7 +16,8 @@
 
 -->
 <mat-fab-toolbar [isOpen]="toolbarOpened" color="primary" direction="left"
-                 [ngClass]="{'is-fullscreen': forceFullscreen, 'mat-elevation-z1': forceFullscreen && toolbarOpened }">
+                 [class.is-fullscreen]="forceFullscreen"
+                 [class.mat-elevation-z1]="forceFullscreen && toolbarOpened">
   <mat-fab-trigger>
     <button mat-fab color="primary"
             [matTooltip]="!toolbarOpened ? ('dashboard.open-toolbar' | translate) : ''"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-text.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-text.component.html
index 43001b3a62..6858a96435 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-text.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-text.component.html
@@ -15,5 +15,5 @@
     limitations under the License.
 
 -->
-<div class="tb-filter-text" [ngClass]="{disabled: disabled, required: requiredClass, nowrap: nowrap}"
+<div class="tb-filter-text" [class.disabled]="disabled" [class.required]="requiredClass" [class.nowrap]="nowrap"
      [innerHTML]="filterText"></div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
index da30c52e22..2f1bf140ea 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
@@ -19,7 +19,7 @@
   <div class="tb-device-profile-alarms">
     <div *ngFor="let alarmControl of alarmsFormArray.controls; trackBy: trackByAlarm;
                  let $index = index; last as isLast;"
-         class="flex flex-col" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+         class="flex flex-col" [class.pb-2]="!isLast">
       <tb-device-profile-alarm [formControl]="alarmControl"
                                [expanded]="$index === 0"
                                [deviceProfileId]="deviceProfileId"
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html
index 39fc900b5e..b0884fc840 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html
@@ -15,4 +15,4 @@
     limitations under the License.
 
 -->
-<div class="tb-rate-limits-text" [ngClass]="{disabled: disabled}" [innerHTML]="rateLimitsText"></div>
+<div class="tb-rate-limits-text" [class.disabled]="disabled" [innerHTML]="rateLimitsText"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
index 2e7e4b786c..a824b0c45d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<table class="tb-legend" [ngClass]="isRowDirection ? 'tb-legend-row' : 'tb-legend-column'">
+<table class="tb-legend" [class.tb-legend-row]="isRowDirection" [class.tb-legend-column]="!isRowDirection">
   <thead>
   <tr class="tb-legend-header" *ngIf="!isRowDirection">
     <th colspan="2"></th>
@@ -29,11 +29,12 @@
   <tbody>
     <ng-container *ngIf="!isRowDirection">
       <tr class="tb-legend-keys" *ngFor="let legendKey of legendKeys()">
-        <td><span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span></td>
+        <td><span class="tb-legend-line" [style.background-color]="legendKey.dataKey.color"></span></td>
         <td class="tb-legend-label"
             (click)="toggleHideData(legendKey.dataIndex)"
             [innerHTML]="legendKey.dataKey.label | safe: 'html'"
-            [ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden, 'tb-horizontal': isHorizontal }">
+            [class.tb-hidden-label]="legendKey.dataKey.hidden"
+            [class.tb-horizontal]="isHorizontal">
         </td>
         <td class="tb-legend-value" *ngIf="legendConfig.showMin === true"
             [innerHTML]="legendData.data[legendKey.dataIndex].min | safe: 'html'"></td>
@@ -47,14 +48,14 @@
             [innerHTML]="legendData.data[legendKey.dataIndex].latest | safe: 'html'"></td>
       </tr>
     </ng-container>
-    <tr *ngIf="isRowDirection" class="tb-legend-keys" [ngClass]="{ 'tb-row-direction': !displayHeader }">
+    <tr *ngIf="isRowDirection" class="tb-legend-keys" [class.tb-row-direction]="!displayHeader">
       <td></td>
       <td *ngFor="let legendKey of legendKeys()">
-        <span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span>
+        <span class="tb-legend-line" [style.background-color]="legendKey.dataKey.color"></span>
         <span class="tb-legend-label"
               [innerHTML]="legendKey.dataKey.label | safe: 'html'"
               (click)="toggleHideData(legendKey.dataIndex)"
-              [ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden}">
+              [class.tb-hidden-label]="legendKey.dataKey.hidden">
         </span>
       </td>
     </tr>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.models.ts
index 5abf69c523..4700620035 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.models.ts
@@ -49,24 +49,24 @@ const processImageFunctionTemplate =
   '  imageDialogTemplate =\n' +
   '    \'<div aria-label="Image">\' +\n' +
   '    \'<form #theForm="ngForm">\' +\n' +
-  '    \'<mat-toolbar fxLayout="row" color="primary">\' +\n' +
+  '    \'<mat-toolbar class="flex flex-row" color="primary">\' +\n' +
   '    \'<h2>{{title}}</h2>\' +\n' +
-  '    \'<span fxFlex></span>\' +\n' +
+  '    \'<span class="flex-1"></span>\' +\n' +
   '    \'<button mat-icon-button (click)="close()">\' +\n' +
   '    \'<mat-icon>close</mat-icon>\' +\n' +
   '    \'</button>\' +\n' +
   '    \'</mat-toolbar>\' +\n' +
   '    \'<div mat-dialog-content>\' +\n' +
   '    \'<div class="mat-content mat-padding">\' +\n' +
-  '    \'<div fxLayout="column" fxFlex>\' +\n' +
+  '    \'<div class="flex flex-1 flex-col">\' +\n' +
   '    \'<div style="padding-top: 20px;">\' +\n' +
   '    \'<img [src]="imageUrl" style="height: 300px;"/>\' +\n' +
   '    \'</div>\' +\n' +
   '    \'</div>\' +\n' +
   '    \'</div>\' +\n' +
   '    \'</div>\' +\n' +
-  '    \'<div mat-dialog-actions fxLayout="row">\' +\n' +
-  '    \'<span fxFlex></span>\' +\n' +
+  '    \'<div mat-dialog-actions class="flex flex-row">\' +\n' +
+  '    \'<span class="flex-1"></span>\' +\n' +
   '    \'<button mat-button (click)="close()" style="margin-right:20px;">Close</button>\' +\n' +
   '    \'</div>\' +\n' +
   '    \'</form>\' +\n' +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html
index ea685bd85f..dcce754a93 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html
@@ -21,7 +21,7 @@
         [disabled]="disabled"
         #matButton
         (click)="openBackgroundSettingsPopup($event, matButton)">
-  <div class="tb-color-preview box" [ngClass]="{'disabled': disabled}">
+  <div class="tb-color-preview box" [class.disabled]="disabled">
     <div class="tb-color-result" [style]="backgroundStyle$ | async">
       <div class="tb-color-overlay" [style]="overlayStyle">
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.html
index 7bf97390f4..17195b2d15 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.html
@@ -21,7 +21,7 @@
         [disabled]="disabled"
         #matButton
         (click)="openColorRangeSettingsPopup($event, matButton)">
-  <div class="tb-color-preview box" [ngClass]="{'disabled': disabled}">
+  <div class="tb-color-preview box" [class.disabled]="disabled">
     <div class="tb-color-result" [style]="colorStyle"></div>
   </div>
 </button>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html
index fdfab0173c..487f23774c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html
@@ -24,7 +24,7 @@
   <tb-icon matButtonIcon *ngIf="modelValue?.type === colorType.function; else colorPreview">mdi:function-variant</tb-icon>
 </button>
 <ng-template #colorPreview>
-  <div class="tb-color-preview box" [ngClass]="{'disabled': disabled}">
+  <div class="tb-color-preview box" [class.disabled]="disabled">
     <div class="tb-color-result" [style]="colorStyle"></div>
   </div>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
index 5c81563ed8..ed1f089454 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
@@ -20,16 +20,14 @@
      [fullscreenBackgroundImage]="backgroundImage"
      (fullscreenChanged)="onFullscreenChanged($event)"
      class="tb-widget"
-     [ngClass]="{
-                'tb-highlighted': isHighlighted(widget),
-                'tb-not-highlighted': isNotHighlighted(widget),
-                'mat-elevation-z4': widget.dropShadow,
-                'tb-overflow-visible': widgetComponent.widgetContext?.overflowVisible,
-                'tb-has-timewindow': widget.hasTimewindow,
-                'tb-edit': isEdit || isEditingWidget,
-                'tb-hover': hovered
-             }"
-     [ngStyle]="widget.style">
+     [class.tb-highlighted]="isHighlighted(widget)"
+     [class.tb-not-highlighted]="isNotHighlighted(widget)"
+     [class.mat-elevation-z4]="widget.dropShadow"
+     [class.tb-overflow-visible]="widgetComponent.widgetContext?.overflowVisible"
+     [class.tb-has-timewindow]="widget.hasTimewindow"
+     [class.tb-edit]="isEdit || isEditingWidget"
+     [class.tb-hover]="hovered"
+     [style]="widget.style">
   <div *ngIf="!!widgetComponent.widgetContext?.inited"
        class="tb-widget-header">
     <ng-container *ngIf="!widgetComponent.widgetContext?.embedTitlePanel">
@@ -62,7 +60,7 @@
       </button>
     </div>
   </div>
-  <div class="tb-widget-content" [ngClass]="{'tb-no-interaction': disableWidgetInteraction}">
+  <div class="tb-widget-content" [class.tb-no-interaction]="disableWidgetInteraction">
     <tb-widget #widgetComponent
                [dashboardWidget]="widget"
                [isEdit]="isEdit"
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
index 2480597218..13a1815fe1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
@@ -385,7 +385,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
         {{ 'widget.reference' | translate }}
         <button mat-icon-button class="tb-mat-16"
                 color="primary"
-                [fxShow]="container.isEditActionEnabled"
+                [class.!hidden]="!container.isEditActionEnabled"
                 (click)="container.onReplaceReferenceWithWidgetCopy($event)"
                 matTooltip="{{ 'widget.replace-reference-with-widget-copy' | translate }}"
                 matTooltipPosition="above">
@@ -394,21 +394,21 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
       </div>
       <div class="tb-widget-actions-panel">
         <button mat-icon-button class="tb-mat-20"
-                [fxShow]="container.isEditActionEnabled"
+                [class.!hidden]="!container.isEditActionEnabled"
                 (click)="container.onEdit($event)"
                 matTooltip="{{ 'widget.edit' | translate }}"
                 matTooltipPosition="above">
           <tb-icon>edit</tb-icon>
         </button>
         <button mat-icon-button class="tb-mat-20"
-                [fxShow]="container.isExportActionEnabled"
+                [class.!hidden]="!container.isExportActionEnabled"
                 (click)="container.onExport($event)"
                 matTooltip="{{ 'widget.export' | translate }}"
                 matTooltipPosition="above">
           <tb-icon>file_download</tb-icon>
         </button>
         <button mat-icon-button class="tb-mat-20"
-                [fxShow]="container.isRemoveActionEnabled"
+                [class.!hidden]="!container.isRemoveActionEnabled"
                 (click)="container.onRemove($event);"
                 matTooltip="{{ 'widget.remove' | translate }}"
                 matTooltipPosition="above">
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
index 8578dba02b..0a28ba7ae7 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>security.2fa.dialog.get-backup-code-title</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="closeDialog()"
           type="button">
@@ -29,12 +29,12 @@
 <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
 <div mat-dialog-content tb-toast class="backup-code">
   <p class="mat-body-2 description" translate>security.2fa.dialog.backup-code-description</p>
-  <div class="container" fxLayout="row wrap">
-    <div *ngFor="let code of backupCode?.codes; even as $even" fxFlex="50" class="code" [ngClass]="{'even': $even}">
+  <div class="container flex flex-row flex-wrap">
+    <div *ngFor="let code of backupCode?.codes; even as $even" class="code max-w-50% flex-full" [class.even]="$even">
       {{ code }}
     </div>
   </div>
-  <div fxLayout="row" fxLayoutAlign="center start"  fxLayoutGap="16px" class="action-buttons">
+  <div class="action-buttons flex flex-row items-center justify-start gap-4">
     <button type="button" mat-stroked-button color="primary" (click)="downloadFile()">
       {{ 'security.2fa.dialog.download-txt' | translate }}
     </button>
@@ -43,7 +43,7 @@
     </button>
   </div>
   <p class="mat-body-2 description" translate>security.2fa.dialog.backup-code-warn</p>
-  <div fxLayout="row" fxLayoutAlign="end start">
+  <div class="flex flex-row items-start justify-end">
     <button type="button" mat-raised-button color="primary" (click)="closeDialog()">
       {{ 'action.done' | translate }}
     </button>
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
index a660a7fb86..dbcc11a74a 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>security.2fa.dialog.enable-email-title</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="closeDialog()"
           type="button">
@@ -36,8 +36,8 @@
       <ng-template matStepLabel>{{ 'security.2fa.dialog.email-step-label' | translate }}</ng-template>
       <form [formGroup]="emailConfigForm" (ngSubmit)="nextStep()">
         <p class="mat-body step-description input" translate>security.2fa.dialog.email-step-description</p>
-        <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px">
-          <mat-form-field fxFlex class="mat-block input-container">
+        <div class="flex flex-row items-center justify-between gap-2">
+          <mat-form-field class="mat-block input-container flex-1">
             <input matInput formControlName="email"
                    type="email" required
                    placeholder="{{ 'security.2fa.dialog.email-step-label' | translate }}" />
@@ -63,8 +63,8 @@
         <p class="mat-body step-description input">
           {{ 'security.2fa.dialog.verification-step-description' | translate : {address: emailConfigForm.get('email').value} }}
         </p>
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" fxLayoutAlign.xs="start end">
-          <mat-form-field fxFlex class="mat-block code-container full-width-xs">
+        <div class="flex flex-row items-center justify-between xs:flex-col xs:items-end xs:justify-start">
+          <mat-form-field class="mat-block code-container full-width-xs flex-1">
             <input matInput formControlName="verificationCode"
                    maxlength="6" type="text" required
                    inputmode="numeric" pattern="[0-9]*"
@@ -74,7 +74,7 @@
               {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
             </mat-error>
           </mat-form-field>
-          <div fxLayoutGap="8px">
+          <div class="flex gap-2">
             <button mat-button
                     matStepperPrevious
                     [disabled]="(isLoading$ | async)">
@@ -95,7 +95,7 @@
       <div>
         <h3 class="result-title" translate>security.2fa.dialog.success</h3>
         <p class="mat-body result-description" translate>security.2fa.dialog.activation-step-description-email</p>
-        <div fxLayout="row" fxLayoutAlign="end center">
+        <div class="flex flex-row items-center justify-end">
           <button mat-raised-button
                   type="button"
                   color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
index a9429f8cb8..0b32ebc947 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>security.2fa.dialog.enable-sms-title</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="closeDialog()"
           type="button">
@@ -36,8 +36,8 @@
       <ng-template matStepLabel>{{ 'security.2fa.dialog.sms-step-label' | translate }}</ng-template>
       <form [formGroup]="smsConfigForm" (ngSubmit)="nextStep()">
         <p class="mat-body step-description input" translate>security.2fa.dialog.sms-step-description</p>
-        <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="15px">
-          <tb-phone-input fxFlex
+        <div class="flex flex-row items-center justify-between gap-3.75">
+          <tb-phone-input class="flex-1"
                           formControlName="phone"
                           [floatLabel]="'never'"
                           placeholder="{{ 'security.2fa.dialog.sms-step-label' | translate }}">
@@ -57,8 +57,8 @@
         <p class="mat-body step-description input">
           {{ 'security.2fa.dialog.verification-step-description' | translate : {address: smsConfigForm.get('phone').value} }}
         </p>
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" fxLayoutAlign.xs="start end">
-          <mat-form-field fxFlex class="mat-block code-container full-width-xs">
+        <div class="flex flex-row items-center justify-between xs:flex-col xs:items-end xs:justify-start">
+          <mat-form-field class="mat-block code-container full-width-xs flex-1">
             <input matInput formControlName="verificationCode"
                    maxlength="6" type="text" required
                    inputmode="numeric" pattern="[0-9]*"
@@ -68,7 +68,7 @@
               {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
             </mat-error>
           </mat-form-field>
-          <div fxLayoutGap="8px">
+          <div class="flex gap-2">
             <button mat-button
                     matStepperPrevious
                     [disabled]="(isLoading$ | async)">
@@ -89,7 +89,7 @@
       <div>
         <h3 class="result-title" translate>security.2fa.dialog.success</h3>
         <p class="mat-body result-description" translate>security.2fa.dialog.activation-step-description-sms</p>
-        <div fxLayout="row" fxLayoutAlign="end center">
+        <div class="flex flex-row items-center justify-end">
           <button mat-raised-button
                   type="button"
                   color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
index 7818674a25..98273f4720 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>security.2fa.dialog.enable-totp-title</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="closeDialog()"
           type="button">
@@ -37,7 +37,7 @@
       <div>
         <p class="mat-body-2" translate>security.2fa.dialog.totp-step-description-open</p>
         <p class="mat-body-2" translate>security.2fa.dialog.totp-step-description-install</p>
-        <div fxLayout="row" fxLayoutAlign="end center">
+        <div class="flex flex-row items-center justify-end">
           <button mat-raised-button
                   type="button"
                   color="primary"
@@ -49,11 +49,11 @@
     </mat-step>
     <mat-step [stepControl]="totpConfigForm">
       <ng-template matStepLabel>{{ 'security.2fa.dialog.verification-step-label' | translate }}</ng-template>
-      <form [formGroup]="totpConfigForm" fxLayoutAlign="start center" fxLayout="column" (ngSubmit)="onSaveConfig()">
+      <form [formGroup]="totpConfigForm" class="flex flex-col items-center justify-start" (ngSubmit)="onSaveConfig()">
         <p class="mat-body qr-code-description" translate>security.2fa.dialog.scan-qr-code</p>
-        <canvas fxFlex #canvas [ngStyle]="{display: totpAuthURL ? 'block' : 'none'}"></canvas>
+        <canvas class="flex-1" #canvas [style.display]="totpAuthURL ? 'block' : 'none'"></canvas>
         <p class="mat-body qr-code-description" style="margin-top: 30px;" translate>security.2fa.dialog.enter-verification-code</p>
-        <mat-form-field fxFlex class="mat-block code-container">
+        <mat-form-field class="mat-block code-container flex-1">
           <input matInput formControlName="verificationCode"
                  maxlength="6" type="text" required
                  inputmode="numeric" pattern="[0-9]*"
@@ -64,7 +64,7 @@
           </mat-error>
         </mat-form-field>
       </form>
-      <div fxLayout="row" fxLayoutAlign="end center">
+      <div class="flex flex-row items-center justify-end">
         <button mat-raised-button
                 type="button"
                 color="primary"
@@ -79,7 +79,7 @@
       <div>
         <h3 class="result-title" translate>security.2fa.dialog.success</h3>
         <p class="mat-body result-description" translate>security.2fa.dialog.activation-step-description-totp</p>
-        <div fxLayout="row" fxLayoutAlign="end center">
+        <div class="flex flex-row items-center justify-end">
           <button mat-raised-button
                   type="button"
                   color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
index b2d26a7129..32533e98da 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
@@ -15,37 +15,37 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageTenantAdmins')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'tenant.manage-tenant-admins' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'tenant.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onTenantIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>tenant.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -65,22 +65,22 @@
         formControlName="tenantProfileId"
         (tenantProfileUpdated)="onTenantProfileUpdated()">
       </tb-tenant-profile-autocomplete>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>tenant.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
-        <section class="tb-default-dashboard" fxFlex fxLayout="column" *ngIf="entity?.id">
-          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+        <section class="tb-default-dashboard flex flex-1 flex-col" *ngIf="entity?.id">
+          <section class="flex flex-1 flex-col gt-sm:flex-row">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'dashboard.home-dashboard' | translate }}"
               formControlName="homeDashboardId"
               [dashboardsScope]="'tenant'"
               [tenantId]="entity?.id.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="homeDashboardHideToolbar">
+            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
               {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
             </mat-checkbox>
           </section>
diff --git a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
index d03b50418d..2b41eff575 100644
--- a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
@@ -18,7 +18,7 @@
 <form style="min-width: 400px; position: relative;">
   <mat-toolbar color="primary">
     <h2 translate>user.activation-link</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -29,10 +29,10 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
-    <div class="mat-content" fxLayout="column">
+    <div class="mat-content flex flex-col">
       <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink, activationLinkTtl: activationLinkTtl}"></span>
-      <div fxLayout="row" fxLayoutAlign="start center">
-        <pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre>
+      <div class="flex flex-row items-center justify-start">
+        <pre class="tb-highlight flex-1"><code>{{ activationLink }}</code></pre>
         <button mat-icon-button
                 color="primary"
                 ngxClipboard
@@ -45,7 +45,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
index 6a4283bc44..4012b13c82 100644
--- a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="add()" style="min-width: 450px;">
   <mat-toolbar color="primary">
     <h2 translate>user.add</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="'users'"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -40,7 +40,7 @@
       </mat-select>
     </mat-form-field>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/pages/user/user.component.html b/ui-ngx/src/app/modules/home/pages/user/user.component.html
index bbb999d3d7..933e244290 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.html
@@ -15,63 +15,63 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'disableAccount')"
-          [fxShow]="!isEdit && isUserCredentialPresent() && isUserCredentialsEnabled()">
+          [class.!hidden]="isEdit || !isUserCredentialPresent() || !isUserCredentialsEnabled()">
     {{'user.disable-account' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'enableAccount')"
-          [fxShow]="!isEdit && isUserCredentialPresent() && !isUserCredentialsEnabled()">
+          [class.!hidden]="isEdit || !isUserCredentialPresent() || isUserCredentialsEnabled()">
     {{'user.enable-account' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'displayActivationLink')"
-          [fxShow]="!isEdit && !isUserCredentialPresent()">
+          [class.!hidden]="isEdit || isUserCredentialPresent()">
     {{'user.display-activation-link' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'resendActivation')"
-          [fxShow]="!isEdit && !isUserCredentialPresent()">
+          [class.!hidden]="isEdit || isUserCredentialPresent()">
     {{'user.resend-activation' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'loginAsUser')"
           *ngIf="loginAsUserEnabled$ | async"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ (entity?.authority === authority.TENANT_ADMIN ? 'user.login-as-tenant-admin' : 'user.login-as-customer-user') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'user.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onUserIdCopied($event)"
             [cbContent]="entity?.id?.id"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>user.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -97,15 +97,15 @@
                       [enableFlagsSelect]="true"
                       formControlName="phone">
       </tb-phone-input>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>user.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
-        <section class="tb-default-dashboard" fxFlex fxLayout="column" *ngIf="entity?.id">
-          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+        <section class="tb-default-dashboard flex flex-1 flex-col" *ngIf="entity?.id">
+          <section class="flex flex-1 flex-col gt-sm:flex-row">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'user.default-dashboard' | translate }}"
               formControlName="defaultDashboardId"
               [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
@@ -113,13 +113,13 @@
               [customerId]="entity?.customerId?.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="defaultDashboardFullscreen">
+            <mat-checkbox class="flex-1" formControlName="defaultDashboardFullscreen">
               {{ 'user.always-fullscreen' | translate }}
             </mat-checkbox>
           </section>
-          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+          <section class="flex flex-1 flex-col gt-sm:flex-row">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'dashboard.home-dashboard' | translate }}"
               formControlName="homeDashboardId"
               [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
@@ -127,7 +127,7 @@
               [customerId]="entity?.customerId?.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="homeDashboardHideToolbar">
+            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
               {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
             </mat-checkbox>
           </section>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
index 804730dbfe..35260628ea 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()" style="min-width: 360px">
   <mat-toolbar color="primary">
     <h2 translate>{{ dialogTitle }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -43,7 +43,7 @@
       bundlesScope="{{bundlesScope}}">
     </tb-widgets-bundle-select>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
index 116829cffd..039b5acdf4 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
@@ -18,7 +18,7 @@
 <form style="width: 800px;">
   <mat-toolbar color="primary">
     <h2 translate>widget.select-widget-type</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -30,7 +30,7 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
     <fieldset [disabled]="(isLoading$ | async)">
-      <div fxLayout="column" fxLayoutGap="16px" fxLayout.gt-sm="row" fxLayoutAlign="center center">
+      <div class="flex flex-col items-center justify-center gap-4 gt-sm:flex-row">
         <button *ngFor="let type of allWidgetTypes;" class="tb-card-button" mat-raised-button color="primary"
                 type="button"
                 (click)="typeSelected(widgetTypes[type])">
@@ -42,7 +42,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
index 19f306fad8..a4c8e4a193 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column">
-  <div fxFlex fxLayout="column" tb-fullscreen [fullscreen]="fullscreen" [tb-hotkeys]="hotKeys" [cheatSheet]="cheatSheetComponent">
+<div class="flex flex-1 flex-col">
+  <div class="flex flex-1 flex-col" tb-fullscreen [fullscreen]="fullscreen" [tb-hotkeys]="hotKeys" [cheatSheet]="cheatSheetComponent">
     <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
-    <mat-toolbar class="mat-elevation-z1 tb-edit-toolbar mat-hue-3" fxLayoutGap="16px" fxLayoutGap.lt-xl="8px">
+    <mat-toolbar class="mat-elevation-z1 tb-edit-toolbar mat-hue-3 gap-4 lt-xl:gap-2">
       <mat-form-field class="tb-widget-title tb-appearance-transparent">
         <input [disabled]="isReadOnly" matInput required maxlength="255"
                [(ngModel)]="widget.widgetName" (ngModelChange)="isDirty = true"
@@ -32,8 +32,8 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <span fxFlex></span>
-      <button mat-button fxHide.lt-md [disabled]="!iframeWidgetEditModeInited"
+      <span class="flex-1"></span>
+      <button mat-button class="lt-md:!hidden" [disabled]="!iframeWidgetEditModeInited"
               (click)="applyWidgetScript()"
               matTooltip="{{ 'widget.run' | translate }} (CTRL + Return)"
               matTooltipPosition="below">
@@ -41,7 +41,7 @@
         <span translate>action.run</span>
       </button>
       <button mat-raised-button
-              fxHide.lt-md [disabled]="(isLoading$ | async) || undoDisabled()"
+              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || undoDisabled()"
               (click)="undoWidget()"
               matTooltip="{{ 'widget.undo' | translate }} (CTRL + Q)"
               matTooltipPosition="below">
@@ -49,7 +49,7 @@
         <span translate>action.undo</span>
       </button>
       <button *ngIf="!isReadOnly" mat-raised-button
-              fxHide.lt-md [disabled]="(isLoading$ | async) || saveDisabled()"
+              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveDisabled()"
               (click)="saveWidget()"
               [tb-circular-progress]="saveWidgetPending"
               matTooltip="{{ 'widget.save' | translate }} (CTRL + S)"
@@ -58,7 +58,7 @@
         <span translate>action.save</span>
       </button>
       <button mat-raised-button
-              fxHide.lt-md [disabled]="(isLoading$ | async) || saveAsDisabled()"
+              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveAsDisabled()"
               (click)="saveWidgetAs()"
               [tb-circular-progress]="saveWidgetAsPending"
               matTooltip="{{ 'widget.saveAs' | translate }} (Shift + CTRL + S)"
@@ -67,20 +67,20 @@
         <span translate>action.saveAs</span>
       </button>
       <button mat-button
-              fxHide.lt-lg
+              class="lt-lg:!hidden"
               (click)="fullscreen = !fullscreen"
               matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
               matTooltipPosition="below">
         <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
         <span translate>widget.toggle-fullscreen</span>
       </button>
-      <button mat-icon-button fxHide fxShow.md
+      <button mat-icon-button class="lt-md:!hidden gt-md:!hidden"
               (click)="fullscreen = !fullscreen"
               matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
               matTooltipPosition="below">
         <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
       </button>
-      <button mat-icon-button fxHide.gt-sm
+      <button mat-icon-button class="gt-md:!hidden"
               [matMenuTriggerFor]="widgetEditMenu">
         <mat-icon>more_vert</mat-icon>
       </button>
@@ -111,7 +111,7 @@
         </button>
       </mat-menu>
     </mat-toolbar>
-    <div fxFlex style="position: relative;">
+    <div class="flex-1" style="position: relative;">
       <div class="tb-editor tb-absolute-fill">
         <div #topPanel class="tb-split tb-split-vertical">
           <div #topLeftPanel class="tb-split tb-content">
@@ -119,10 +119,9 @@
               <mat-tab label="{{ 'widget.resources' | translate }}">
                 <div class="tb-resize-container" style="background-color: #fff;">
                   <div class="mat-padding">
-                    <div fxFlex fxLayout="row" style="max-height: 40px;"
-                         fxLayoutAlign="start center"
+                    <div class="flex flex-1 flex-row items-center justify-start" style="max-height: 40px;"
                          *ngFor="let resource of widget.resources; let i = index" >
-                      <tb-resource-autocomplete fxFlex class="mat-block resource-field"
+                      <tb-resource-autocomplete class="mat-block resource-field flex-1"
                                                 hideRequiredMarker required
                                                 subscriptSizing="dynamic"
                                                 [allowAutocomplete]="resource.isModule"
@@ -240,7 +239,7 @@
               <mat-tab label="{{ 'widget.widget-settings' | translate }}">
                 <div class="tb-resize-container" style="background-color: #fff;">
                   <div class="mat-padding">
-                    <tb-gallery-image-input fxFlex label="{{'widget.image-preview' | translate}}"
+                    <tb-gallery-image-input class="flex-1" label="{{'widget.image-preview' | translate}}"
                                     [(ngModel)]="widget.image"
                                     (ngModelChange)="isDirty = true" >
                     </tb-gallery-image-input>
@@ -257,7 +256,7 @@
                       [(ngModel)]="widget.tags"
                       (ngModelChange)="isDirty = true">
                     </tb-string-items-list>
-                    <div fxLayout="column" fxLayoutGap="16px" style="padding-bottom: 16px;">
+                    <div class="flex flex-col gap-4" style="padding-bottom: 16px;">
                       <mat-slide-toggle class="mat-block"
                                         [(ngModel)]="widget.scada"
                                         (ngModelChange)="isDirty = true">
@@ -324,7 +323,7 @@
             </div>
           </div>
           <div #framePanel class="tb-split tb-content" style="overflow-y: hidden; position: relative;">
-            <div class="mat-content tb-progress-cover" fxFlex fxLayout="column" fxLayoutAlign="center center"
+            <div class="mat-content tb-progress-cover flex flex-1 flex-col items-center justify-center"
                  *ngIf="!iframeWidgetEditModeInited">
               <mat-spinner diameter="100" mode="indeterminate" color="warn"></mat-spinner>
             </div>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html b/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html
index f5f6f5268f..11b3a58d07 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html
@@ -15,33 +15,33 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'edit')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'widget.edit' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openDetails')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'widget.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{ 'widget.delete-widget' | translate }}
   </button>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -54,7 +54,7 @@
           {{ 'widget.title-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <tb-gallery-image-input fxFlex
+      <tb-gallery-image-input class="flex-1"
                       label="{{'widget.image-preview' | translate}}"
                       formControlName="image">
       </tb-gallery-image-input>
@@ -67,7 +67,7 @@
         label="{{ 'widget.tags' | translate }}"
         formControlName="tags">
       </tb-string-items-list>
-      <div fxLayout="column" fxLayoutGap="16px">
+      <div class="flex flex-col gap-4">
         <mat-slide-toggle formControlName="scada">
           {{ 'widget.scada' | translate }}
         </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
index 592be51486..355c08ce5a 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 650px;">
   <mat-toolbar color="primary">
     <h2 translate>widgets-bundle.add</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       [standalone]="true">
     </tb-widgets-bundle>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html
index 821eebfe92..3667f8962e 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html
@@ -26,7 +26,7 @@
           <mat-icon>arrow_back</mat-icon>
         </button>
         <span class="mat-headline-5">{{ widgetsBundle.title }}: {{ 'widget.widgets' | translate }}</span>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button [disabled]="isLoading$ | async"
                 *ngIf="!isReadOnly"
                 matTooltip="{{ 'widget.add-new-widget' | translate }}"
@@ -90,7 +90,7 @@
           <mat-icon>delete</mat-icon>
         </button>
         <button cdkDragHandle *ngIf="editMode"
-                [fxShow]="widgets?.length > 1"
+                [class.!hidden]="!widgets || widgets.length <= 1"
                 mat-icon-button
                 matTooltip="{{ 'action.drag' | translate }}"
                 matTooltipPosition="above"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
index df66eee579..ce83ff9f4d 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
@@ -15,33 +15,33 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
+<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'widgets-bundle.open-widgets-bundle' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openDetails')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'widgets-bundle.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'widgets-bundle.delete' | translate }}
   </button>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -54,7 +54,7 @@
           {{ 'widgets-bundle.title-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <tb-gallery-image-input fxFlex
+      <tb-gallery-image-input class="flex-1"
                               label="{{'widgets-bundle.image-preview' | translate}}"
                               formControlName="image">
       </tb-gallery-image-input>
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index 247ab70326..56a3cd8ccd 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -92,6 +92,7 @@ module.exports = {
       gap: {
         '0.75': '0.1875rem',
         '1.25': '0.3125rem',
+        '3.75': '0.9375rem',
         '6.25': '1.5625rem'
       },
       minHeight: {