From 6edc66c715b08d88348abea6331a42afeed247f1 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 15 Oct 2024 18:14:10 +0300
Subject: [PATCH] Flex layout replacements. Switch to tailwind.css.

---
 ...teway-service-rpc-connector.component.html |  6 +-
 .../add-doc-link-dialog.component.html        |  2 +-
 .../add-quick-link-dialog.component.html      |  2 +-
 .../cluster-info-table.component.html         | 11 ++--
 .../configured-features.component.html        | 24 +++----
 .../lib/home-page/doc-link.component.html     | 18 ++---
 .../home-page/doc-links-widget.component.html |  8 +--
 .../edit-links-dialog.component.html          | 16 ++---
 ...ng-started-completed-dialog.component.html | 12 ++--
 .../getting-started-widget.component.html     | 26 ++++----
 .../lib/home-page/quick-link.component.html   | 16 ++---
 .../quick-links-widget.component.html         |  8 +--
 .../recent-dashboards-widget.component.html   | 10 +--
 .../usage-info-widget.component.html          | 66 +++++++++----------
 .../lib/home-page/version-info.component.html | 28 ++++----
 .../select-entity-dialog.component.html       |  6 +-
 .../widget/lib/rpc/knob.component.html        | 15 ++---
 .../lib/rpc/led-indicator.component.html      | 15 +++--
 .../rpc/persistent-add-dialog.component.html  | 18 ++---
 .../persistent-details-dialog.component.html  | 27 ++++----
 .../persistent-filter-panel.component.html    |  6 +-
 .../lib/rpc/persistent-table.component.html   | 23 ++++---
 .../lib/rpc/persistent-table.component.ts     |  2 +
 .../lib/rpc/round-switch.component.html       | 14 ++--
 .../widget/lib/rpc/switch.component.html      | 26 ++++----
 .../alarms-table-key-settings.component.html  | 16 ++---
 ...larms-table-widget-settings.component.html | 13 ++--
 ...tion-button-widget-settings.component.html |  4 +-
 ...mand-button-widget-settings.component.html |  4 +-
 ...ower-button-widget-settings.component.html | 26 ++++----
 ...ggle-button-widget-settings.component.html | 19 +++---
 ...-value-card-widget-settings.component.html |  6 +-
 ...board-state-widget-settings.component.html |  6 +-
 ...ck-overview-widget-settings.component.html |  2 +-
 .../html-card-widget-settings.component.html  |  2 +-
 .../label-card-widget-settings.component.html |  6 +-
 ...-value-card-widget-settings.component.html |  8 +--
 .../cards/label-widget-label.component.html   | 18 ++---
 .../label-widget-settings.component.html      | 12 ++--
 .../markdown-widget-settings.component.html   |  6 +-
 ...rogress-bar-widget-settings.component.html |  6 +-
 .../qrcode-widget-settings.component.html     |  6 +-
 ...meseries-table-key-settings.component.html | 14 ++--
 ...s-table-latest-key-settings.component.html | 24 ++++---
 ...eries-table-widget-settings.component.html | 11 ++--
 ...otification-widget-settings.component.html |  2 +-
 .../value-card-widget-settings.component.html | 16 ++---
 ...-chart-card-widget-settings.component.html |  2 +-
 ...with-labels-widget-settings.component.html | 18 +++--
 .../chart-widget-settings.component.html      |  2 +-
 ...ghnut-chart-widget-settings.component.html | 18 ++---
 .../flot-bar-key-settings.component.html      |  2 +-
 .../flot-bar-widget-settings.component.html   |  2 +-
 .../chart/flot-key-settings.component.html    | 33 +++++-----
 .../flot-latest-key-settings.component.html   |  5 +-
 .../flot-line-key-settings.component.html     |  2 +-
 .../flot-line-widget-settings.component.html  |  2 +-
 .../flot-pie-key-settings.component.html      |  4 +-
 .../flot-pie-widget-settings.component.html   | 16 ++---
 .../chart/flot-threshold.component.html       |  2 +-
 .../chart/flot-widget-settings.component.html | 64 ++++++++----------
 .../chart/label-data-key.component.html       | 18 ++---
 ...atest-chart-widget-settings.component.html | 48 +++++++-------
 ...range-chart-widget-settings.component.html | 24 ++++---
 ...e-series-chart-key-settings.component.html | 13 ++--
 ...-series-chart-line-settings.component.html |  4 +-
 ...eries-chart-widget-settings.component.html | 28 ++++----
 ui-ngx/tailwind.config.js                     |  6 ++
 68 files changed, 467 insertions(+), 478 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
index 539f374078..007ce7861a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
@@ -213,7 +213,7 @@
               <input matInput [formControl]="control" required/>
             </mat-form-field>
             <mat-icon style="cursor:pointer; max-width:30px;min-width:30px"
-                      class="flex-[1_1_30px]"
+                      class=" min-w-7.5 max-w-7.5 flex-1 basis-7.5"
                       (click)="removeSNMPoid(i)"
                       matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete
             </mat-icon>
@@ -231,7 +231,7 @@
           <input matInput formControlName="methodFilter" placeholder="post_attributes"/>
         </mat-form-field>
         <div class="flex flex-1 flex-row gap-2.5">
-          <mat-form-field class="max-w-4/12 flex-[1_1_33%]">
+          <mat-form-field class="max-w-4/12 flex-full">
             <mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label>
             <mat-select formControlName="httpMethod">
               <mat-option *ngFor="let method of hTTPMethods" [value]="method">
@@ -305,7 +305,7 @@
           <input matInput formControlName="methodFilter" placeholder="echo"/>
         </mat-form-field>
         <div class="flex flex-row items-center justify-center gap-2.5">
-          <mat-form-field class="max-w-4/12 flex-[1_1_33%]">
+          <mat-form-field class="max-w-4/12 flex-full">
             <mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label>
             <mat-select formControlName="httpMethod">
               <mat-option *ngFor="let method of hTTPMethods" [value]="method">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html
index 7f86897f7e..fb950f6579 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html
@@ -18,7 +18,7 @@
 <form class="tb-add-doc-link-dialog" [formGroup]="addDocLinkFormGroup">
   <mat-toolbar style="background: transparent;">
     <h2 translate>widgets.documentation.add-link-title</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html
index c76f32405c..cb56e2da3a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html
@@ -18,7 +18,7 @@
 <form class="tb-add-quick-link-dialog" [formGroup]="addQuickLinkFormGroup">
   <mat-toolbar style="background: transparent;">
     <h2 translate>widgets.quick-links.add-link-title</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/cluster-info-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/cluster-info-table.component.html
index f62d1ea61d..457d1bf316 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/cluster-info-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/cluster-info-table.component.html
@@ -41,7 +41,7 @@
               [matTooltip]="infoTooltip(serviceData, 'cpu')"
               matTooltipPosition="above"
               class="tb-resource-usage"
-              [ngClass]="statusClass(serviceData.cpuUsage)">
+              [class]="statusClass(serviceData.cpuUsage)">
       {{ serviceData.cpuUsage }}%
     </mat-cell>
   </ng-container>
@@ -53,7 +53,7 @@
               [matTooltip]="infoTooltip(serviceData, 'ram')"
               matTooltipPosition="above"
               class="tb-resource-usage"
-              [ngClass]="statusClass(serviceData.memoryUsage)">
+              [class]="statusClass(serviceData.memoryUsage)">
       {{ serviceData.memoryUsage }}%
     </mat-cell>
   </ng-container>
@@ -65,13 +65,12 @@
               [matTooltip]="infoTooltip(serviceData, 'disc')"
               matTooltipPosition="above"
               class="tb-resource-usage"
-              [ngClass]="statusClass(serviceData.discUsage)">
+              [class]="statusClass(serviceData.discUsage)">
       {{ serviceData.discUsage }}%
     </mat-cell>
   </ng-container>
   <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
   <mat-row *matRowDef="let serviceData; columns: displayedColumns;"></mat-row>
 </table>
-<span [fxShow]="dataSource.isEmpty() | async"
-      fxLayoutAlign="center center"
-      class="no-data-found" translate>widgets.cluster-info.no-data</span>
+<span [class.!hidden]="(dataSource.isEmpty() | async) === false"
+      class="no-data-found flex items-center justify-center" translate>widgets.cluster-info.no-data</span>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
index ec26e67111..cef21e9a01 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
@@ -15,55 +15,55 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <div class="tb-title">{{ 'widgets.configured-features.title' | translate }}
     <mat-icon
       matTooltip="{{ 'widgets.configured-features.info' | translate }}"
       matTooltipPosition="above"
       class="tb-info-icon">info</mat-icon>
   </div>
-  <mat-grid-list class="tb-features-list" fxFlex cols="6" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
+  <mat-grid-list class="tb-features-list flex-1" cols="6" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
     <mat-grid-tile class="tb-feature-tile" colspan="3">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.emailEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.emailEnabled}"
+         [class.configured]="featuresInfo?.emailEnabled"
          routerLink="/settings/outgoing-mail">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.emailEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.email-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" colspan="3">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.smsEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.smsEnabled}"
+         [class.configured]="featuresInfo?.smsEnabled"
          routerLink="/settings/notifications">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.smsEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.sms-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" [colspan]="bottomColspan">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.notificationEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.notificationEnabled}"
+         [class.configured]="featuresInfo?.notificationEnabled"
          routerLink="/settings/notifications">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.notificationEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.slack-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" [colspan]="bottomColspan">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.oauthEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.oauthEnabled}"
+         [class.configured]="featuresInfo?.oauthEnabled"
          routerLink="/security-settings/oauth2">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.oauthEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.oauth2-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" [colspan]="lastColspan">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.twoFaEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.twoFaEnabled}"
+         [class.configured]="featuresInfo?.twoFaEnabled"
          routerLink="/security-settings/2fa">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.twoFaEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.2fa-feature' | translate}}</div>
       </a>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
index d4c171ab15..4db770a919 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
@@ -15,36 +15,36 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" *ngIf="addMode || editMode; else docLinkTemplate">
-  <div fxFlex class="tb-edit-link" [ngClass]="{'edit-mode': editMode}" [formGroup]="editDocLinkFormGroup" fxLayout="column">
+<div class="flex flex-row" *ngIf="addMode || editMode; else docLinkTemplate">
+  <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editDocLinkFormGroup">
     <tb-material-icon-select required formControlName="icon"></tb-material-icon-select>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.documentation.name</mat-label>
       <input required matInput formControlName="name">
       <mat-error *ngIf="editDocLinkFormGroup.get('name').hasError('required')">
         {{ 'widgets.documentation.name-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>widgets.documentation.link</mat-label>
       <input required matInput formControlName="link">
       <mat-error *ngIf="editDocLinkFormGroup.get('link').hasError('required')">
         {{ 'widgets.documentation.link-required' | translate }}
       </mat-error>
     </mat-form-field>
-    <div *ngIf="addMode" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="8px">
+    <div *ngIf="addMode" class="flex flex-row items-stretch justify-end gap-2">
       <button *ngIf="!addOnly" mat-button color="primary" (click)="cancelAdd()">{{ 'action.cancel' | translate }}</button>
       <button mat-raised-button color="primary" (click)="add()">{{ 'action.add' | translate }}</button>
     </div>
   </div>
-  <div *ngIf="editMode" fxLayout="row" class="tb-edit-buttons">
+  <div *ngIf="editMode" class="tb-edit-buttons flex flex-row">
     <button mat-icon-button (click)="apply()"><tb-icon>check</tb-icon></button>
     <button mat-icon-button (click)="cancelEdit()"><tb-icon>close</tb-icon></button>
   </div>
 </div>
 <ng-template #docLinkTemplate>
-  <div fxLayout="row">
-    <div fxFlex class="tb-link">
+  <div class="flex flex-row">
+    <div class="tb-link flex-1">
       <div class="tb-link-container">
         <div class="tb-link-icon-container">
           <tb-icon color="primary">{{ docLink.icon }}</tb-icon>
@@ -52,7 +52,7 @@
         <div class="tb-link-text">{{ docLink.name }}</div>
       </div>
     </div>
-    <div fxLayout="row" fxLayoutAlign="start center" class="tb-edit-buttons">
+    <div class="tb-edit-buttons flex flex-row items-center justify-start">
       <button mat-icon-button
               matTooltip="{{ 'action.edit' | translate }}"
               matTooltipPosition="above"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html
index 75d46f1865..474824cb12 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <div class="tb-card-header">
     <a class="tb-title-link" href="https://thingsboard.io/docs/" target="_blank">{{ 'widgets.documentation.title' | translate }}</a>
     <button class="tb-title-icon"
@@ -26,9 +26,9 @@
       <tb-icon>edit</tb-icon>
     </button>
   </div>
-  <mat-grid-list class="tb-links-list" fxFlex [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
+  <mat-grid-list class="tb-links-list flex-1" [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
     <mat-grid-tile class="tb-links-tile" *ngFor="let docLink of documentationLinks?.links">
-      <a fxFlex class="tb-link-button"
+      <a class="tb-link-button flex-1"
          [href]="docLink.link" target="_blank">
         <div class="tb-link-container">
           <div class="tb-link-icon-container">
@@ -39,7 +39,7 @@
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-links-tile">
-      <div fxFlex class="tb-add-link-button"
+      <div class="tb-add-link-button flex-1"
            matTooltip="{{ 'widgets.documentation.add-link' | translate }}"
            matTooltipPosition="above"
            (click)="addLink()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html
index 03a60f2714..d148c8baf9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html
@@ -18,7 +18,7 @@
 <form class="tb-edit-links-dialog" [formGroup]="editLinksFormGroup">
   <mat-toolbar style="background: transparent;">
     <h2>{{ (mode === 'docs' ? 'widgets.documentation.title' : 'widgets.quick-links.title') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -28,12 +28,12 @@
   <div mat-dialog-content>
     <div class="tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
          (cdkDropListDropped)="linkDrop($event)" [cdkDropListDisabled]="editMode || addMode">
-      <div cdkDrag class="tb-draggable" *ngFor="let linkControl of linksFormArray().controls; trackBy: trackByLink;
+      <div cdkDrag class="tb-draggable flex flex-row items-center justify-start" *ngFor="let linkControl of linksFormArray().controls; trackBy: trackByLink;
                let $index = index; last as isLast;"
-           fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+           [class.pb-2]="!isLast">
         <ng-container [ngSwitch]="mode">
           <ng-template [ngSwitchCase]="'docs'">
-            <tb-doc-link fxFlex #docLink [formControl]="linkControl"
+            <tb-doc-link class="flex-1" #docLink [formControl]="linkControl"
                          [disableEdit]="editMode || addMode"
                          (editModeChanged)="editMode = $event"
                          (docLinkUpdated)="update()"
@@ -44,7 +44,7 @@
             </ng-container>
           </ng-template>
           <ng-template [ngSwitchCase]="'quickLinks'">
-            <tb-quick-link fxFlex #quickLink [formControl]="linkControl"
+            <tb-quick-link class="flex-1" #quickLink [formControl]="linkControl"
                            [disableEdit]="editMode || addMode"
                            (editModeChanged)="editMode = $event"
                            (quickLinkUpdated)="update()"
@@ -67,7 +67,7 @@
     </div>
   </div>
   <div mat-dialog-actions>
-    <div *ngIf="!editMode && !addMode" fxFlex class="tb-add-link-button"
+    <div *ngIf="!editMode && !addMode" class="tb-add-link-button flex-1"
          matTooltip="{{ (mode === 'docs' ? 'widgets.documentation.add-link' : 'widgets.quick-links.add-link') | translate }}"
          matTooltipPosition="above"
          (click)="addLink()">
@@ -76,14 +76,14 @@
     <ng-container *ngIf="addMode">
       <ng-container [ngSwitch]="mode">
         <ng-template [ngSwitchCase]="'docs'">
-          <tb-doc-link fxFlex [(ngModel)]="addingLink"
+          <tb-doc-link class="flex-1" [(ngModel)]="addingLink"
                        [ngModelOptions]="{standalone: true}"
                        (docLinkAdded)="linkAdded($event)"
                        (docLinkAddCanceled)="addMode = false">
           </tb-doc-link>
         </ng-template>
         <ng-template [ngSwitchCase]="'quickLinks'">
-          <tb-quick-link fxFlex [(ngModel)]="addingLink"
+          <tb-quick-link class="flex-1" [(ngModel)]="addingLink"
                        [ngModelOptions]="{standalone: true}"
                        (quickLinkAdded)="linkAdded($event)"
                        (quickLinkAddCanceled)="addMode = false">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.html
index 41082e520c..0269fc3bd4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.html
@@ -15,19 +15,19 @@
     limitations under the License.
 
 -->
-<div class="tb-getting-started-completed-dialog-container" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="height: 64px; padding: 8px;">
-    <span fxFlex></span>
+<div class="tb-getting-started-completed-dialog-container flex flex-col">
+  <div class="flex flex-row items-center justify-start" style="height: 64px; padding: 8px;">
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </div>
-  <div fxLayout="row" fxLayoutAlign="center center" style="height: 70px;">
-    <div class="tb-done-container" fxLayout="row" fxLayoutAlign="center center">
+  <div class="flex flex-row items-center justify-center" style="height: 70px;">
+    <div class="tb-done-container flex flex-row items-center justify-center">
       <mat-icon class="tb-done-icon" color="primary">done</mat-icon>
     </div>
   </div>
-  <div fxLayout="column" fxLayoutAlign="start center" style="padding-top: 30px;">
+  <div class="flex flex-col items-center justify-start" style="padding-top: 30px;">
     <div class="tb-done-welcome-title" translate>widgets.getting-started.done-welcome-title</div>
     <div class="tb-done-welcome-text" translate>widgets.getting-started.done-welcome-text</div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
index 0be1ab675b..004d9807b7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
@@ -26,7 +26,7 @@
       <ng-template [ngSwitchCase]="authority.SYS_ADMIN">
         <mat-step [completed]="gettingStarted.maxSelectedIndex > -1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step1.title</div>
               <a *ngIf="matStepper.selectedIndex === 0" mat-button color="primary" routerLink="/tenants">{{ 'tenant.tenants' | translate }}</a>
             </div>
@@ -37,7 +37,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 0">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step2.title</div>
               <a *ngIf="matStepper.selectedIndex === 1" mat-button color="primary" routerLink="/settings/outgoing-mail">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -48,7 +48,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step3.title</div>
               <a *ngIf="matStepper.selectedIndex === 2" mat-button color="primary" routerLink="/settings/notifications">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -59,7 +59,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 2">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step4.title</div>
               <a *ngIf="matStepper.selectedIndex === 3" mat-button color="primary" routerLink="/security-settings/2fa">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -70,7 +70,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 3">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step5.title</div>
               <a *ngIf="matStepper.selectedIndex === 4" mat-button color="primary" routerLink="/security-settings/oauth2">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -81,7 +81,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 4">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step6.title</div>
               <a *ngIf="matStepper.selectedIndex === 5" mat-button color="primary" routerLink="/settings/notifications">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -94,7 +94,7 @@
       <ng-template [ngSwitchCase]="authority.TENANT_ADMIN">
         <mat-step [completed]="gettingStarted.maxSelectedIndex > -1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step1.title</div>
               <a *ngIf="matStepper.selectedIndex === 0" mat-button color="primary" routerLink="/entities/devices">{{ 'device.devices' | translate }}</a>
             </div>
@@ -105,7 +105,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 0">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step2.title</div>
             </div>
           </ng-template>
@@ -153,7 +153,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step3.title</div>
               <a *ngIf="matStepper.selectedIndex === 2" mat-button color="primary" routerLink="/dashboards">{{ 'dashboard.dashboards' | translate }}</a>
             </div>
@@ -164,7 +164,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 2">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step4.title</div>
               <a *ngIf="matStepper.selectedIndex === 3" mat-button color="primary" routerLink="/profiles/deviceProfiles">{{ 'widgets.getting-started.tenant-admin.step4.alarm-rules' | translate }}</a>
             </div>
@@ -175,7 +175,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 3">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step5.title</div>
             </div>
           </ng-template>
@@ -193,7 +193,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 4">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step6.title</div>
               <a *ngIf="matStepper.selectedIndex === 5" mat-button color="primary" routerLink="/customers">{{ 'customer.customers' | translate }}</a>
             </div>
@@ -205,7 +205,7 @@
       </ng-template>
     </ng-container>
   </mat-stepper>
-  <div *ngIf="allCompleted" fxLayout="column" fxLayoutAlign="center center" style="padding-top: 24px;">
+  <div *ngIf="allCompleted" class="flex flex-col items-center justify-center" style="padding-top: 24px;">
     <button (click)="gettingStartedCompleted()" mat-flat-button color="primary">
       <mat-icon>rocket_launch</mat-icon>{{ 'widgets.getting-started.finish' | translate }}</button>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
index 36ce77c813..9038805e73 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" *ngIf="addMode || editMode; else quickLinkTemplate">
-  <div fxFlex class="tb-edit-link" [ngClass]="{'edit-mode': editMode}" [formGroup]="editQuickLinkFormGroup" fxLayout="column">
-    <mat-form-field fxFlex class="mat-block">
+<div class="flex flex-row" *ngIf="addMode || editMode; else quickLinkTemplate">
+  <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editQuickLinkFormGroup">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.quick-links.quick-link</mat-label>
       <input matInput type="text"
              #linkInput
@@ -50,19 +50,19 @@
         {{ 'widgets.quick-links.quick-link-required' | translate }}
       </mat-error>
     </mat-form-field>
-    <div *ngIf="addMode" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="8px">
+    <div *ngIf="addMode" class="flex flex-row items-stretch justify-end gap-2">
       <button *ngIf="!addOnly" mat-button color="primary" (click)="cancelAdd()">{{ 'action.cancel' | translate }}</button>
       <button mat-raised-button color="primary" (click)="add()">{{ 'action.add' | translate }}</button>
     </div>
   </div>
-  <div *ngIf="editMode" fxLayout="row" class="tb-edit-buttons">
+  <div *ngIf="editMode" class="tb-edit-buttons flex flex-row">
     <button mat-icon-button (click)="apply()"><tb-icon>check</tb-icon></button>
     <button mat-icon-button (click)="cancelEdit()"><tb-icon>close</tb-icon></button>
   </div>
 </div>
 <ng-template #quickLinkTemplate>
-  <div fxLayout="row">
-    <div fxFlex class="tb-link">
+  <div class="flex flex-row">
+    <div class="tb-link flex-1">
       <div class="tb-link-container">
         <div class="tb-link-icon-container">
           <tb-icon color="primary">{{ quickLink?.icon }}</tb-icon>
@@ -70,7 +70,7 @@
         <div class="tb-link-text">{{ displayLinkFn(quickLink) }}</div>
       </div>
     </div>
-    <div fxLayout="row" fxLayoutAlign="start center" class="tb-edit-buttons">
+    <div class="tb-edit-buttons flex flex-row items-center justify-start">
       <button mat-icon-button
               matTooltip="{{ 'action.edit' | translate }}"
               matTooltipPosition="above"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html
index 1de9975c53..6380e116c8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <div class="tb-card-header">
     <div class="tb-title">{{ 'widgets.quick-links.title' | translate }}</div>
     <button class="tb-title-icon"
@@ -26,9 +26,9 @@
       <tb-icon>edit</tb-icon>
     </button>
   </div>
-  <mat-grid-list class="tb-links-list" fxFlex [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
+  <mat-grid-list class="tb-links-list flex-1" [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
     <mat-grid-tile class="tb-links-tile" *ngFor="let quickLink of menuLinks$() | async">
-      <a fxFlex class="tb-link-button"
+      <a class="tb-link-button flex-1"
          [routerLink]="quickLink.path">
         <div class="tb-link-container">
           <div class="tb-link-icon-container">
@@ -39,7 +39,7 @@
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-links-tile">
-      <div fxFlex class="tb-add-link-button"
+      <div class="tb-add-link-button flex-1"
            matTooltip="{{ 'widgets.quick-links.add-link' | translate }}"
            matTooltipPosition="above"
            (click)="addLink()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
index 6c73e47574..01ebe25c10 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
@@ -15,16 +15,16 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <ng-container *ngIf="hasDashboardsAccess; else noDataAvailable">
     <div class="tb-card-header">
       <a class="tb-title-link" routerLink="/dashboards">{{ 'widgets.recent-dashboards.title' | translate }}</a>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-md="space-between center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2 lt-md:items-center lt-md:justify-between">
         <tb-toggle-header #dashboardsToggle [value]="toggleValue" name="usageToggle" (valueChange)="toggleValueChange($event)">
           <tb-toggle-option value="last">{{ 'widgets.recent-dashboards.last' | translate }}</tb-toggle-option>
           <tb-toggle-option value="starred">{{ 'widgets.recent-dashboards.starred' | translate }}</tb-toggle-option>
         </tb-toggle-header>
-        <a *ngIf="authUser.authority === authority.TENANT_ADMIN" fxHide.md
+        <a *ngIf="authUser.authority === authority.TENANT_ADMIN" class="md:!hidden"
            mat-flat-button color="primary" routerLink="/dashboards" [queryParams]="{action: 'add'}">{{ 'dashboard.add' | translate }}</a>
       </div>
     </div>
@@ -40,7 +40,7 @@
               </mat-header-cell>
               <mat-cell class="star-cell" *matCellDef="let lastVisitedDashboard">
                 <mat-icon (click)="toggleDashboardStar(lastVisitedDashboard)"
-                          class="star" [ngClass]="{'starred': lastVisitedDashboard.starred}">{{ lastVisitedDashboard.starred ? 'star' : 'star_border' }}</mat-icon>
+                          class="star" [class.starred]="lastVisitedDashboard.starred">{{ lastVisitedDashboard.starred ? 'star' : 'star_border' }}</mat-icon>
               </mat-cell>
             </ng-container>
             <ng-container matColumnDef="title">
@@ -75,7 +75,7 @@
           <div class="tb-starred-dashboard-row" *ngFor="let dashboard of userDashboardsInfo?.starred">
             <div class="tb-cell star-cell">
               <mat-icon (click)="toggleDashboardStar(dashboard)"
-                        class="star" [ngClass]="{'starred': dashboard.starred}">{{ dashboard.starred ? 'star' : 'star_border' }}</mat-icon>
+                        class="star" [class.starred]="dashboard.starred">{{ dashboard.starred ? 'star' : 'star_border' }}</mat-icon>
             </div>
             <div class="tb-cell title">
               <a [routerLink]="createDashboardUrl(dashboard.id)">{{ dashboard.title | customTranslate }}</a>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
index ebb07140f8..ede61a2618 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <ng-container *ngIf="hasUsageInfoAccess; else noDataAvailable">
     <div class="tb-card-header">
       <a class="tb-title-link" routerLink="/usage">{{ 'widgets.usage-info.title' | translate }}</a>
@@ -26,55 +26,55 @@
     </div>
     <ng-container [ngSwitch]="usageToggle.value">
       <ng-template [ngSwitchCase]="'entities'">
-        <div fxFlex class="tb-usage-list">
+        <div class="tb-usage-list flex-1">
           <div class="tb-usage-items">
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.devices}" translate>device.devices</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.assets}" translate>asset.assets</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.users}" translate>user.users</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.dashboards}" translate>dashboard.dashboards</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.customers}"  translate>customer.customers</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.devices" translate>device.devices</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.assets" translate>asset.assets</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.users" translate>user.users</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.dashboards" translate>dashboard.dashboards</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.customers" translate>customer.customers</div>
           </div>
           <div class="tb-usage-items-values">
             <div class="tb-usage-items-counts">
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.devices}">{{ usageInfo?.devices | shortNumber }} / {{ maxValue(usageInfo?.maxDevices) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.assets}">{{ usageInfo?.assets | shortNumber }} / {{ maxValue(usageInfo?.maxAssets) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.users}">{{ usageInfo?.users | shortNumber }} / {{ maxValue(usageInfo?.maxUsers) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.dashboards}">{{ usageInfo?.dashboards | shortNumber }} / {{ maxValue(usageInfo?.maxDashboards) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.customers}">{{ usageInfo?.customers | shortNumber }} / {{ maxValue(usageInfo?.maxCustomers) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.devices">{{ usageInfo?.devices | shortNumber }} / {{ maxValue(usageInfo?.maxDevices) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.assets">{{ usageInfo?.assets | shortNumber }} / {{ maxValue(usageInfo?.maxAssets) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.users">{{ usageInfo?.users | shortNumber }} / {{ maxValue(usageInfo?.maxUsers) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.dashboards">{{ usageInfo?.dashboards | shortNumber }} / {{ maxValue(usageInfo?.maxDashboards) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.customers">{{ usageInfo?.customers | shortNumber }} / {{ maxValue(usageInfo?.maxCustomers) }}</div>
             </div>
             <div class="tb-usage-items-progress">
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.devices}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.devices, usageInfo?.maxDevices)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.assets}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.assets, usageInfo?.maxAssets)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.users}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.users, usageInfo?.maxUsers)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.dashboards}"color="primary" mode="determinate" [value]="progressValue(usageInfo?.dashboards, usageInfo?.maxDashboards)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.customers}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.customers, usageInfo?.maxCustomers)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.devices" color="primary" mode="determinate" [value]="progressValue(usageInfo?.devices, usageInfo?.maxDevices)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.assets" color="primary" mode="determinate" [value]="progressValue(usageInfo?.assets, usageInfo?.maxAssets)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.users" color="primary" mode="determinate" [value]="progressValue(usageInfo?.users, usageInfo?.maxUsers)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.dashboards" color="primary" mode="determinate" [value]="progressValue(usageInfo?.dashboards, usageInfo?.maxDashboards)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.customers" color="primary" mode="determinate" [value]="progressValue(usageInfo?.customers, usageInfo?.maxCustomers)"></mat-progress-bar>
             </div>
           </div>
         </div>
       </ng-template>
       <ng-template [ngSwitchCase]="'apiCalls'">
-        <div fxFlex class="tb-usage-list">
+        <div class="tb-usage-list flex-1">
           <div class="tb-usage-items">
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.transportMessages}" translate>api-usage.transport-messages</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.jsExecutions}" translate>api-usage.javascript</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.alarms}" translate>api-usage.alarms-created</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.emails}" translate>api-usage.email</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.sms}"  translate>api-usage.sms</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.transportMessages" translate>api-usage.transport-messages</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.jsExecutions" translate>api-usage.javascript</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.alarms" translate>api-usage.alarms-created</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.emails" translate>api-usage.email</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.sms" translate>api-usage.sms</div>
           </div>
           <div class="tb-usage-items-values">
             <div class="tb-usage-items-counts">
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.transportMessages}">{{ usageInfo?.transportMessages | shortNumber }} / {{ maxValue(usageInfo?.maxTransportMessages) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.jsExecutions}">{{ usageInfo?.jsExecutions | shortNumber }} / {{ maxValue(usageInfo?.maxJsExecutions) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.alarms}">{{ usageInfo?.alarms | shortNumber }} / {{ maxValue(usageInfo?.maxAlarms) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.emails}">{{ usageInfo?.emails | shortNumber }} / {{ maxValue(usageInfo?.maxEmails) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.sms}">{{ usageInfo?.sms | shortNumber }} / {{ maxValue(usageInfo?.maxSms) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.transportMessages">{{ usageInfo?.transportMessages | shortNumber }} / {{ maxValue(usageInfo?.maxTransportMessages) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.jsExecutions">{{ usageInfo?.jsExecutions | shortNumber }} / {{ maxValue(usageInfo?.maxJsExecutions) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.alarms">{{ usageInfo?.alarms | shortNumber }} / {{ maxValue(usageInfo?.maxAlarms) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.emails">{{ usageInfo?.emails | shortNumber }} / {{ maxValue(usageInfo?.maxEmails) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.sms">{{ usageInfo?.sms | shortNumber }} / {{ maxValue(usageInfo?.maxSms) }}</div>
             </div>
             <div class="tb-usage-items-progress">
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.transportMessages}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.transportMessages, usageInfo?.maxTransportMessages)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.jsExecutions}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.jsExecutions, usageInfo?.maxJsExecutions)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.alarms}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.alarms, usageInfo?.maxAlarms)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.emails}"color="primary" mode="determinate" [value]="progressValue(usageInfo?.emails, usageInfo?.maxEmails)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.sms}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.sms, usageInfo?.maxSms)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.transportMessages" color="primary" mode="determinate" [value]="progressValue(usageInfo?.transportMessages, usageInfo?.maxTransportMessages)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.jsExecutions" color="primary" mode="determinate" [value]="progressValue(usageInfo?.jsExecutions, usageInfo?.maxJsExecutions)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.alarms" color="primary" mode="determinate" [value]="progressValue(usageInfo?.alarms, usageInfo?.maxAlarms)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.emails" color="primary" mode="determinate" [value]="progressValue(usageInfo?.emails, usageInfo?.maxEmails)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.sms" color="primary" mode="determinate" [value]="progressValue(usageInfo?.sms, usageInfo?.maxSms)"></mat-progress-bar>
             </div>
           </div>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html
index 94d6111b7c..be7d226a9c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html
@@ -15,48 +15,48 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column">
+<div class="tb-card-content flex flex-col">
   <div class="tb-card-header">
     <div class="tb-card-title">
       <div class="tb-title" translate>widgets.version-info.title</div>
     </div>
     <a mat-button color="primary" class="tb-contact-us" href="https://thingsboard.io/docs/contact-us/" target="_blank">{{ 'widgets.version-info.contact-us' | translate }}</a>
   </div>
-  <div fxLayout="row" fxLayoutGap="8px" fxLayout.gt-md-lg="column" fxFlex>
-    <div class="tb-version-info-container" fxLayout="row" fxFlex>
-      <div fxFlex fxLayout="column" fxLayoutAlign="space-evenly stretch">
+  <div class="flex flex-1 flex-row gap-2 gt-md-lg:flex-col">
+    <div class="tb-version-info-container flex flex-1 flex-row">
+      <div class="flex flex-1 flex-col items-stretch justify-evenly">
         <div class="tb-card-header">
           <a class="tb-version-link" [href]="updateMessage?.currentVersionReleaseNotesUrl" target="_blank">
-            <span fxHide.md-lg translate>widgets.version-info.current-version</span>
-            <span fxHide.lt-md fxHide.gt-md-lg translate>widgets.version-info.current</span>
+            <span class="md-lg:!hidden" translate>widgets.version-info.current-version</span>
+            <span class="lt-md:!hidden gt-md-lg:!hidden" translate>widgets.version-info.current</span>
           </a>
         </div>
         <div class="tb-version">{{ updateMessage?.currentVersion }}</div>
-        <div fxHide.gt-md-lg style="height: 24px;">
+        <div class="gt-md-lg:!hidden" style="height: 24px;">
         </div>
       </div>
     </div>
-    <div class="tb-version-info-container" fxLayout="row" fxFlex *ngIf="updateMessage?.updateAvailable; else versionUpToDate">
-      <div fxFlex fxLayout="column" fxLayoutAlign="space-evenly stretch">
+    <div class="tb-version-info-container flex flex-1 flex-row" *ngIf="updateMessage?.updateAvailable; else versionUpToDate">
+      <div class="flex flex-1 flex-col items-stretch justify-evenly">
         <div class="tb-card-header">
           <a class="tb-version-link" [href]="updateMessage?.latestVersionReleaseNotesUrl" target="_blank">
-            <span fxHide.md-lg translate>widgets.version-info.available-version</span>
-            <span fxHide.lt-md fxHide.gt-md-lg translate>widgets.version-info.available</span>
+            <span class="md-lg:!hidden" translate>widgets.version-info.available-version</span>
+            <span class="lt-md:!hidden gt-md-lg:!hidden" translate>widgets.version-info.available</span>
           </a>
         </div>
         <div class="tb-version">{{ updateMessage?.latestVersion }}</div>
-        <div fxHide.gt-md-lg fxLayout="row" fxLayoutAlign="end end">
+        <div class="flex flex-row items-end justify-end gt-md-lg:!hidden">
           <a mat-flat-button color="primary" class="tb-upgrade" [href]="updateMessage?.upgradeInstructionsUrl" target="_blank">{{ 'widgets.version-info.upgrade' | translate }}</a>
         </div>
       </div>
-      <div fxHide.lt-md fxHide.md-lg fxLayout="column" fxLayoutAlign="center">
+      <div class="flex flex-col items-stretch justify-center md-lg:!hidden lt-md:!hidden">
         <a mat-flat-button color="primary" class="tb-upgrade" [href]="updateMessage?.upgradeInstructionsUrl" target="_blank">{{ 'widgets.version-info.upgrade' | translate }}</a>
       </div>
     </div>
   </div>
 </div>
 <ng-template #versionUpToDate>
-  <div class="tb-version-info-container up-to-date" fxFlex fxLayout="column" fxLayoutAlign="space-evenly center">
+  <div class="tb-version-info-container up-to-date flex flex-1 flex-col items-center justify-evenly">
     <div class="material-icons-round check-icon">check</div>
     <div class="up-to-date-text" translate>widgets.version-info.version-is-up-to-date</div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
index 2b9e63cfeb..05b581e39c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form #addEntityForm="ngForm" [formGroup]="selectEntityFormGroup" (ngSubmit)="save()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2 translate>widgets.maps.select-entity</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button [matDialogClose]="null" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -37,7 +37,7 @@
     </mat-form-field>
     <div class="tb-hint" translate>widgets.maps.select-entity-hint</div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.html
index 1276e7d5e6..976b2ebc76 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div #knobContainer class="tb-knob" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}">
-  <div fxFlex fxLayout="column" fxLayoutAlign="center center">
+<div #knobContainer class="tb-knob flex flex-col" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'">
+  <div class="flex flex-1 flex-col items-center justify-center">
     <div #knob class="knob">
-      <div #knobValueContainer class="value-container" fxLayout="row" fxLayoutAlign="center center">
+      <div #knobValueContainer class="value-container flex flex-row items-center justify-center">
         <span #knobValue class="knob-value">{{ value }}</span>
       </div>
       <div class="canvas-background"></div>
@@ -27,16 +27,15 @@
         <div #knobTopPointer class="top-pointer"></div>
       </div>
       <div class="top"></div>
-      <div #knobErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}"
-           fxLayout="row" fxLayoutAlign="center center">
+      <div #knobErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
         <span #knobError class="knob-error" [innerHTML]="error"></span>
       </div>
-      <div #knobTitleContainer class="title-container" fxLayout="row" fxLayoutAlign="center center">
+      <div #knobTitleContainer class="title-container flex flex-row items-center justify-center">
         <span #knobTitle class="knob-title">{{ title }}</span>
       </div>
-      <div #knobMinmaxContainer class="minmax-container" fxLayout="row" fxLayoutAlign="start center">
+      <div #knobMinmaxContainer class="minmax-container flex flex-row items-center justify-start">
         <span class="minmax-label">min</span>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <span class="minmax-label">max</span>
       </div>
       <div #textMeasure id="text-measure"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.html
index ec5c8a6942..e69a291aed 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.html
@@ -15,17 +15,20 @@
     limitations under the License.
 
 -->
-<div class="tb-led-indicator" fxLayout="column">
-  <div fxFlex="20" #ledTitleContainer class="title-container" fxLayout="row" fxLayoutAlign="center center" [fxShow]="showTitle">
+<div class="tb-led-indicator flex flex-col">
+  <div #ledTitleContainer class="title-container flex max-w-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
     <span #ledTitle class="led-title">{{title}}</span>
   </div>
-  <div fxFlex="{{showTitle ? 80 : 100}}"
-       [ngStyle]="{paddingTop: showTitle ? '5px': '10px'}" #ledContainer id="led-container" fxLayout="column" fxLayoutAlign="center center">
+  <div class="flex flex-full flex-col items-center justify-center"
+       [class]="{
+          'max-w-80%': showTitle,
+          'max-w-100%': !showTitle
+       }"
+       [style.padding-top]="showTitle ? '5px': '10px'" #ledContainer id="led-container">
     <div #led class="led">
     </div>
   </div>
-  <div #ledErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}"
-       fxLayout="row" fxLayoutAlign="center center">
+  <div #ledErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
     <span #ledError class="led-error">{{ error }}</span>
   </div>
   <div #textMeasure id="text-measure"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
index 716513df1a..90496180d8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="persistentFormGroup" (ngSubmit)="save()" style="min-width: 480px; max-width: 600px;">
   <mat-toolbar color="primary">
     <h2>{{ 'widgets.persistent-table.add-title' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -30,13 +30,13 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content class="add-dialog">
     <fieldset [disabled]="isLoading$ | async">
-      <div fxLayout="row" fxLayoutGap="6px">
-        <mat-slide-toggle fxFlex class="mat-block" formControlName="oneWayElseTwoWay">
+      <div class="flex flex-row gap-1.5">
+        <mat-slide-toggle class="mat-block flex-1" formControlName="oneWayElseTwoWay">
           {{ rpcMessageTypeText }}
         </mat-slide-toggle>
       </div>
-      <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="6px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row flex-wrap gap-1.5 xs:flex-col">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.method</mat-label>
           <input matInput formControlName="method" required>
           <mat-error *ngIf="this.persistentFormGroup.get('method').hasError('required')">
@@ -46,7 +46,7 @@
             {{'widgets.persistent-table.white-space-error' | translate}}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.retries</mat-label>
           <input matInput type="number" formControlName="retries">
         </mat-form-field>
@@ -72,15 +72,15 @@
     </fieldset>
   </div>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions class="flex flex-row">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="close()">
       {{ 'action.close' | translate }}
     </button>
-    <span fxFlex></span>
-    <div fxLayout="row" fxLayoutGap="8px">
+    <span class="flex-1"></span>
+    <div class="flex flex-row gap-2">
       <button mat-raised-button
               color="primary"
               type="submit"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
index ffe1560c76..6f32ec4cb0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="persistentFormGroup" style="min-width: 480px;">
   <mat-toolbar color="primary">
     <h2>{{ persistentFormGroup.get('rpcId').value }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -30,31 +30,32 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="6px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-1.5 xs:flex-col">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.created-time</mat-label>
           <input matInput formControlName="createdTime" readonly>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.expiration-time</mat-label>
           <input matInput formControlName="expirationTime" readonly>
         </mat-form-field>
       </div>
-      <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="6px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row flex-wrap gap-1.5 xs:flex-col">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.message-type</mat-label>
           <input matInput formControlName="messageType" readonly>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.status</mat-label>
           <input matInput formControlName="status" readonly
-                 [ngStyle]="{ fontWeight: 'bold', color: rpcStatusColorsMap.get(data.persistentRequest.status) }">
+                 style="font-weight: bold;"
+                 [style.color]="rpcStatusColorsMap.get(data.persistentRequest.status)">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.method</mat-label>
           <input matInput formControlName="method" readonly>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block"
+        <mat-form-field class="mat-block flex-1"
                         *ngIf="persistentFormGroup.get('retries').value">
           <mat-label translate>widgets.persistent-table.retries</mat-label>
           <input matInput formControlName="retries" readonly>
@@ -96,7 +97,7 @@
       </mat-accordion>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions class="flex flex-row">
     <button mat-raised-button
             *ngIf="allowDelete"
             color="primary"
@@ -105,8 +106,8 @@
             [disabled]="(isLoading$ | async)">
       {{ 'widgets.persistent-table.delete' | translate }}
     </button>
-    <span fxFlex></span>
-    <div fxLayout="row" fxLayoutGap="8px">
+    <span class="flex-1"></span>
+    <div class="flex flex-row gap-2">
       <button mat-button color="primary"
               type="button"
               [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
index 1a8f576b3c..c1e853c555 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<form fxLayout="column" class="mat-content mat-padding" [formGroup]="persistentFilterFormGroup" (ngSubmit)="update()">
-  <mat-form-field fxFlex class="mat-block" floatLabel="always">
+<form class="mat-content mat-padding flex flex-col" [formGroup]="persistentFilterFormGroup" (ngSubmit)="update()">
+  <mat-form-field class="mat-block flex-1" floatLabel="always">
     <mat-label translate>widgets.persistent-table.rpc-status-list</mat-label>
     <mat-select formControlName="rpcStatus"
                 placeholder="{{ rpcSearchPlaceholder }}">
@@ -28,7 +28,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+  <div class="tb-panel-actions flex flex-row items-center justify-end">
     <button type="button"
             mat-button
             (click)="cancel()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html
index a4e7588d96..18aca6ac20 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html
@@ -16,8 +16,8 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <div fxFlex class="table-container">
+  <div class="tb-absolute-fill flex flex-1 flex-col">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="persistentDatasource"
              matSort [matSortActive]="pageLink.sortOrder.property"
              [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
@@ -50,7 +50,8 @@
             {{ 'widgets.persistent-table.status' | translate }}
           </mat-header-cell>
           <mat-cell *matCellDef="let column"
-                    [ngStyle]="{fontWeight: 'bold', color: rpcStatusColor.get((column.status))}">
+                    style="font-weight: bold;"
+                    [style.color]="rpcStatusColor.get(column.status)">
             {{ rpcStatusTranslation.get(column.status) | translate }}
           </mat-cell>
         </ng-container>
@@ -74,7 +75,7 @@
           <mat-header-cell *matHeaderCellDef>
           </mat-header-cell>
           <mat-cell *matCellDef="let column">
-            <div fxHide fxShow.gt-md fxLayout="row" fxLayoutAlign="end">
+            <div class="flex flex-row items-stretch justify-end lt-lg:!hidden">
               <ng-container *ngFor="let actionDescriptor of actionCellButtonAction">
                 <button mat-icon-button [disabled]="isLoading$ | async"
                         matTooltip="{{ actionDescriptor.displayName }}"
@@ -84,7 +85,7 @@
                 </button>
               </ng-container>
             </div>
-            <div fxHide fxShow.lt-lg *ngIf="actionCellButtonAction.length">
+            <div class="gt-md:!hidden" *ngIf="actionCellButtonAction.length">
               <button mat-icon-button
                       (click)="$event.stopPropagation(); ctx.detectChanges();"
                       [matMenuTriggerFor]="cellActionsMenu">
@@ -105,14 +106,12 @@
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
         <mat-row *matRowDef="let column; columns: displayedColumns"
-                 [fxShow]="!persistentDatasource.dataLoading"></mat-row>
+                 [class.!hidden]="persistentDatasource.dataLoading"></mat-row>
       </table>
-      <span [fxShow]="(persistentDatasource.isEmpty() | async) && !persistentDatasource.dataLoading && hasData"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ noDataDisplayMessageText }}</span>
-      <span [fxShow]="persistentDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ 'common.loading' | translate }}</span>
+      <span [class.!hidden]="(persistentDatasource.isEmpty() | async) === false || persistentDatasource.dataLoading || !hasData"
+            class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
+      <span [class.!hidden]="!persistentDatasource.dataLoading"
+            class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
   </div>
   <mat-divider *ngIf="displayPagination"></mat-divider>
   <mat-paginator *ngIf="displayPagination"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts
index 9890db321a..ba12957779 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts
@@ -443,6 +443,8 @@ export class PersistentTableComponent extends PageComponent implements OnInit, O
     });
     this.ctx.detectChanges();
   }
+
+  protected readonly rpcStatusColorsMap = rpcStatusColors;
 }
 
 class PersistentDatasource implements DataSource<PersistentRpcData> {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html
index 4f618177a7..ef7fd496ac 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html
@@ -15,11 +15,16 @@
     limitations under the License.
 
 -->
-<div class="tb-round-switch" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}">
-  <div #switchTitleContainer fxFlex="20" class="title-container" fxLayout="row" fxLayoutAlign="center center" [fxShow]="showTitle">
+<div class="tb-round-switch flex flex-col" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'">
+  <div #switchTitleContainer class="title-container flex max-w-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
     <span #switchTitle class="switch-title">{{title}}</span>
   </div>
-  <div #switchContainer fxFlex="{{showTitle ? 80 : 100}}" [ngStyle]="{paddingTop: showTitle ? '5px': '10px'}" id="switch-container" fxLayout="column" fxLayoutAlign="center center">
+  <div #switchContainer class="flex flex-full flex-col items-center justify-center"
+       [class]="{
+          'max-w-80%': showTitle,
+          'max-w-100%': !showTitle
+       }"
+       [style.padding-top]="showTitle ? '5px': '10px'" id="switch-container">
     <div #switch class="switch">
       <input #onoff type="checkbox" id="{{checkboxId}}" name="onoff" />
       <div class="back">
@@ -30,8 +35,7 @@
       </div>
     </div>
   </div>
-  <div #switchErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}"
-       fxLayout="row" fxLayoutAlign="center center">
+  <div #switchErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
     <span #switchError class="switch-error">{{ error }}</span>
   </div>
   <div #textMeasure id="text-measure"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html
index f9de708700..0f994b2a1d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html
@@ -15,30 +15,34 @@
     limitations under the License.
 
 -->
-<div class="tb-switch" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}" *ngIf="switchType === 'switch'; else slideToggle">
-  <div #switchErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}"
-       fxLayout="row" fxLayoutAlign="center center">
+<div class="tb-switch flex flex-col" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" *ngIf="switchType === 'switch'; else slideToggle">
+  <div #switchErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
     <span #switchError class="switch-error">{{ error }}</span>
   </div>
-  <div #switchTitleContainer fxFlex="30" class="title-container" fxLayout="row" fxLayoutAlign="center center" [fxShow]="showTitle">
+  <div #switchTitleContainer class="title-container flex max-w-30% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
     <span #switchTitle class="switch-title">{{title}}</span>
   </div>
-  <div #switchContainer fxFlex="{{showTitle ? 70 : 100}}" id="switch-container" fxLayout="column" fxLayoutAlign="center center">
+  <div #switchContainer class="flex flex-full flex-col items-center justify-center"
+       [class]="{
+          'max-w-70%': showTitle,
+          'max-w-100%': !showTitle
+       }"
+       id="switch-container">
     <div #switch class="switch">
       <mat-slide-toggle #matSlideToggle [(ngModel)]="value" (change)="onValue()">
       </mat-slide-toggle>
     </div>
-    <div #onoffContainer class="onoff-container" fxLayout="row" fxLayoutAlign="center start" [fxShow]="showOnOffLabels">
-      <span #offLabel fxFlex class="off-label" [fxShow]="!value" style="text-align: center;">OFF</span>
-      <span fxFlex [fxShow]="value"></span>
-      <span #onLabel fxFlex class="on-label" [fxShow]="value" style="text-align: center;">ON</span>
-      <span fxFlex [fxShow]="!value"></span>
+    <div #onoffContainer class="onoff-container flex flex-row items-start justify-center" [class.!hidden]="!showOnOffLabels">
+      <span #offLabel class="off-label flex-1" [class.!hidden]="value" style="text-align: center;">OFF</span>
+      <span class="flex-1" [class.!hidden]="!value"></span>
+      <span #onLabel class="on-label flex-1" [class.!hidden]="!value" style="text-align: center;">ON</span>
+      <span class="flex-1" [class.!hidden]="value"></span>
     </div>
   </div>
   <div #textMeasure id="text-measure"></div>
 </div>
 <ng-template #slideToggle>
-  <div class="tb-absolute-fill" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}" fxLayoutAlign="center center">
+  <div class="tb-absolute-fill flex flex-col items-center justify-center" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'">
     <div>
       <mat-slide-toggle [disabled]="executingUpdateValue" [labelPosition]="labelPosition" [color]="sliderColor" [(ngModel)]="value" (change)="onValue()">{{title}}</mat-slide-toggle>
       <mat-progress-bar style="height: 2px;" [color]="sliderColor" mode="indeterminate" *ngIf="executingUpdateValue"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
index 45c2b5f2ee..5b5dc4fa49 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.table.column-settings</div>
     <div class="tb-form-row">
       <div class="fixed-title-width">{{ 'widgets.table.custom-title' | translate }}</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="customTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -62,14 +62,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -86,14 +85,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellContentFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-content-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
index 9ec4212aa1..ef51468feb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.table.table-header</div>
     <div class="tb-form-row">
       <div class="fixed-title-width">{{ 'widgets.table.alarms-table-title' | translate }}</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="alarmsTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -73,7 +73,7 @@
         {{ 'widgets.table.allow-alarms-clear' | translate }}
       </mat-slide-toggle>
     </div>
-    <mat-form-field fxFlex subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
       <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>
       <mat-select formControlName="reserveSpaceForHiddenAction">
         <mat-option [value]="'true'">
@@ -84,7 +84,7 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field fxFlex subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
       <mat-label translate>widgets.table.default-sort-order</mat-label>
       <input matInput formControlName="defaultSortOrder">
     </mat-form-field>
@@ -104,14 +104,13 @@
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.table.rows</div>
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableWidgetSettingsForm.get('useRowStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-row-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html
index b5c7c63650..5d268e4d2f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.action-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.activated-state-hint' | translate}}" translate>widgets.button-state.activated-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.activated-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.activated' | translate }}"
@@ -31,7 +31,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html
index 086a29e9c1..4cc7839799 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.command-button.behavior</div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.command-button.on-click-hint' | translate}}" translate>widgets.command-button.on-click</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.command-button.on-click' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -29,7 +29,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
index 8f111ea5d8..45f4f32c43 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.power-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
@@ -33,7 +33,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}" translate>widgets.power-button.power-on</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.power-button.power-on' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -42,7 +42,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}" translate>widgets.power-button.power-off</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.power-button.power-off' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -51,7 +51,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -92,15 +92,15 @@
     <div class="tb-form-panel-title" translate>widgets.power-button.button</div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.power-on-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorOn">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorOn">
@@ -110,15 +110,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.power-off-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorOff">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorOff">
@@ -128,15 +128,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.disabled-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorDisabled">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorDisabled">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
index d96ea2d9c8..4a5ebee7da 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.toggle-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.toggle-button.checked' | translate }}"
@@ -33,7 +33,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.check-hint' | translate}}" translate>widgets.toggle-button.check</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.toggle-button.check' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -42,7 +42,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.uncheck-hint' | translate}}" translate>widgets.toggle-button.uncheck</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.toggle-button.uncheck' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -51,7 +51,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -65,10 +65,9 @@
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div class="tb-form-panel stroked tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="!toggleButtonWidgetSettingsForm.get('autoScale').value" disabled>
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="autoScale" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="autoScale" (click)="$event.stopPropagation()">
               {{ 'widgets.toggle-button.auto-scale' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -100,7 +99,7 @@
     </div>
   </div>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>widgets.toggle-button.button-appearance</div>
       <tb-toggle-select [(ngModel)]="buttonAppearanceType" [ngModelOptions]="{standalone: true}">
         <tb-toggle-option value="checked">{{ 'widgets.toggle-button.checked' | translate }}</tb-toggle-option>
@@ -108,14 +107,14 @@
       </tb-toggle-select>
     </div>
     <tb-widget-button-appearance
-        [fxShow]="buttonAppearanceType === 'checked'"
+        [class.!hidden]="buttonAppearanceType !== 'checked'"
         withBorderRadius
         [withAutoScale]="false"
         [autoScale]="toggleButtonWidgetSettingsForm.get('autoScale').value"
         formControlName="checkedAppearance">
     </tb-widget-button-appearance>
     <tb-widget-button-appearance
-        [fxShow]="buttonAppearanceType === 'unchecked'"
+        [class.!hidden]="buttonAppearanceType !== 'unchecked'"
         withBorderRadius
         [withAutoScale]="false"
         [autoScale]="toggleButtonWidgetSettingsForm.get('autoScale').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
index 8c8c3e9793..7848fcc48c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
@@ -27,7 +27,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showSubtitle">
         {{ 'widgets.aggregated-value-card.subtitle' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="subtitle" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -45,8 +45,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
index 4374534bae..1389b4d9fb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="dashboardStateWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="dashboardStateWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.dashboard-state.dashboard-state-settings</legend>
     <mat-form-field class="mat-block">
@@ -39,7 +39,7 @@
     </mat-form-field>
     <mat-expansion-panel class="tb-settings">
       <mat-expansion-panel-header>
-        <mat-panel-description fxLayoutAlign="end" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -47,7 +47,7 @@
         <mat-slide-toggle class="mat-slide" formControlName="defaultAutofillLayout">
           {{ 'widgets.dashboard-state.autofill-state-layout' | translate }}
         </mat-slide-toggle>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.dashboard-state.default-margin</mat-label>
           <input matInput type="number" min="0" step="1" formControlName="defaultMargin">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html
index 84efa19554..19dd86b288 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="edgeQuickOverviewWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="edgeQuickOverviewWidgetSettingsForm">
   <mat-slide-toggle class="mat-slide" formControlName="enableDefaultTitle">
     {{ 'widgets.edge.display-default-title' | translate }}
   </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html
index bc4d6bac86..7e8cfab732 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="htmlCardWidgetSettingsForm" fxLayout="column">
+<section [formGroup]="htmlCardWidgetSettingsForm" class="flex flex-col">
   <tb-html formControlName="cardHtml" required
           label="{{ 'widgets.html-card.html' | translate }}">
   </tb-html>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html
index f4ba5c6b04..333f9a0ec9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html
@@ -25,7 +25,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.label-card.label</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -42,11 +42,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="labelCardWidgetSettingsForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
index 9bc1abdfa5..4ce3d3f705 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
@@ -27,7 +27,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showLabel">
         {{ 'widgets.label-card.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -42,11 +42,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="labelValueCardWidgetSettingsForm.get('iconColor').value?.color"
@@ -58,7 +58,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.label-value-card.value</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
index 0654e01c84..cb91304d4f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="label-widget-label" fxFlex [formGroup]="labelWidgetLabelFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="label-widget-label flex-1" [formGroup]="labelWidgetLabelFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           {{ labelWidgetLabelFormGroup.get('pattern').value }}
         </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)="removeLabel.emit()"
@@ -34,9 +34,9 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <section class="tb-widget-settings" fxLayout="column">
+      <section class="tb-widget-settings flex flex-col">
         <mat-form-field style="padding-bottom: 16px;">
           <mat-label translate>widgets.label-widget.label-pattern</mat-label>
           <input required matInput formControlName="pattern">
@@ -47,12 +47,12 @@
         </mat-form-field>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.label-widget.label-position</legend>
-          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-            <mat-form-field fxFlex>
+          <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.label-widget.x-pos</mat-label>
               <input matInput type="number" min="0" max="100" formControlName="x">
             </mat-form-field>
-            <mat-form-field fxFlex>
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.label-widget.y-pos</mat-label>
               <input matInput type="number" min="0" max="100" formControlName="y">
             </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html
index 732cadab39..5efef3f877 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html
@@ -15,19 +15,19 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="labelWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="labelWidgetSettingsForm">
   <tb-gallery-image-input required
                   label="{{ 'widgets.label-widget.background-image' | translate }}"
                   formControlName="backgroundImageUrl">
   </tb-gallery-image-input>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.label-widget.labels</legend>
-    <div fxLayout="column">
+    <div class="flex flex-col">
       <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
            (cdkDropListDropped)="labelDrop($event)">
-        <div cdkDrag class="tb-draggable" *ngFor="let labelControl of labelsFormArray().controls; trackBy: trackByLabelControl;
+        <div cdkDrag class="tb-draggable flex flex-col" *ngFor="let labelControl of labelsFormArray().controls; trackBy: trackByLabelControl;
                  let $index = index; last as isLast;"
-             fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+             [class.pb-2]="!isLast">
           <tb-label-widget-label [formControl]="labelControl"
                                  [expanded]="labelControl.new"
                                  (removeLabel)="removeLabel($index)">
@@ -35,8 +35,8 @@
         </div>
       </div>
       <div *ngIf="!labelsFormArray().controls.length">
-      <span translate fxLayoutAlign="center center"
-            class="tb-prompt">widgets.label-widget.no-labels</span>
+      <span translate
+            class="tb-prompt flex items-center justify-center">widgets.label-widget.no-labels</span>
       </div>
       <div style="padding-top: 16px;">
         <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html
index e33529a179..d35462a629 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="markdownWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="markdownWidgetSettingsForm">
   <mat-slide-toggle class="mat-slide" formControlName="useMarkdownTextFunction">
     {{ 'widgets.markdown.use-markdown-text-function' | translate }}
   </mat-slide-toggle>
-  <tb-js-func [fxShow]="markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
+  <tb-js-func [class.!hidden]="!markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
               formControlName="markdownTextFunction"
               [globalVariables]="functionScopeVariables"
               [functionArgs]="['data', 'ctx']"
               functionTitle="{{ 'widgets.markdown.markdown-text-function' | translate }}"
               helpId="widget/lib/markdown/markdown_text_fn">
   </tb-js-func>
-  <tb-markdown-editor [fxShow]="!markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
+  <tb-markdown-editor [class.!hidden]="markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
                       formControlName="markdownTextPattern"
                       label="{{ 'widgets.markdown.markdown-text-pattern' | translate }}"
                       helpId="widget/editor/widget_js_markdown_pattern">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
index f9543b11cf..43e2747197 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
@@ -39,7 +39,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showValue">
         {{ 'widgets.progress-bar.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
         </tb-font-settings>
@@ -52,7 +52,7 @@
     </div>
     <div class="tb-form-row space-between  column-xs">
       <div>{{ 'widgets.progress-bar.range' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.progress-bar.min</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
@@ -67,7 +67,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTicks">
         {{ 'widgets.progress-bar.range-ticks' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="ticksFont"
                           previewText="100">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
index 407ad5fffe..65164d564b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="qrCodeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="qrCodeWidgetSettingsForm">
   <mat-slide-toggle class="mat-slide" formControlName="useQrCodeTextFunction">
     {{ 'widgets.qr-code.use-qr-code-text-function' | translate }}
   </mat-slide-toggle>
-  <mat-form-field [fxShow]="!qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value">
+  <mat-form-field [class.!hidden]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value">
     <mat-label translate>widgets.qr-code.qr-code-text-pattern</mat-label>
     <input required matInput formControlName="qrCodeTextPattern">
     <mat-hint>{{ 'widgets.qr-code.qr-code-text-pattern-hint' | translate }}</mat-hint>
@@ -28,7 +28,7 @@
     </mat-error>
   </mat-form-field>
   <tb-js-func required
-              [fxShow]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value"
+              [class.!hidden]="!qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value"
               formControlName="qrCodeTextFunction"
               [globalVariables]="functionScopeVariables"
               [functionArgs]="['data']"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
index d4eb5b3abc..c77e8bd8d7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
@@ -50,14 +50,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -74,14 +73,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellContentFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-content-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
index aaa42a90ff..330bffbc86 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
@@ -21,13 +21,13 @@
     <mat-slide-toggle class="mat-slide" formControlName="show">
       {{ 'widgets.table.show-latest-data-column' | translate }}
     </mat-slide-toggle>
-    <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
+    <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
       <div translate>widgets.table.latest-data-column-order</div>
       <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
         <input matInput formControlName="order" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
-    <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
+    <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
       <div>{{ 'widgets.table.default-column-visibility' | translate }}</div>
       <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="defaultColumnVisibility">
@@ -43,7 +43,7 @@
         </mat-select>
       </mat-form-field>
     </div>
-    <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
+    <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
       <div>{{ 'widgets.table.column-selection-to-display' | translate }}</div>
       <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="columnSelectionToDisplay">
@@ -57,16 +57,15 @@
       </mat-form-field>
     </div>
   </div>
-  <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
+  <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableLatestKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -81,16 +80,15 @@
       </ng-template>
     </mat-expansion-panel>
   </div>
-  <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
+  <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableLatestKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellContentFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-content-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
index c9affa9b5c..b75a2bf40e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
@@ -35,7 +35,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTimestamp">
         {{ 'widgets.table.display-timestamp' | translate }}
       </mat-slide-toggle>
-      <tb-date-format-select fxFlex excludeLastUpdateAgo formControlName="dateFormat"></tb-date-format-select>
+      <tb-date-format-select class="flex-1" excludeLastUpdateAgo formControlName="dateFormat"></tb-date-format-select>
     </div>
 
     <mat-slide-toggle class="mat-slide"  formControlName="enableStickyAction">
@@ -44,7 +44,7 @@
     <mat-slide-toggle class="mat-slide"  formControlName="showCellActionsMenu">
       {{ 'widgets.table.show-cell-actions-menu-mobile' | translate }}
     </mat-slide-toggle>
-    <mat-form-field fxFlex subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
       <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>
       <mat-select formControlName="reserveSpaceForHiddenAction">
         <mat-option [value]="'true'">
@@ -80,14 +80,13 @@
       {{ 'widgets.table.hide-empty-lines' | translate }}
     </mat-slide-toggle>
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableWidgetSettingsForm.get('useRowStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-row-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html
index f59c85b3ca..e5e726ca5f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html
@@ -48,7 +48,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.notification.counter-value' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="counterValueFont"
                           clearButton
                           [previewText]="countPreviewFn"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
index a60f22d939..518007a852 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
@@ -39,7 +39,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showLabel">
         {{ 'widgets.value-card.label' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="labelFont"
                           [previewText]="label">
         </tb-font-settings>
@@ -47,15 +47,15 @@
         </tb-color-settings>
       </div>
     </div>
-    <div [fxShow]="iconEnabled" class="tb-form-row">
+    <div [class.!hidden]="!iconEnabled" class="tb-form-row">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="valueCardWidgetSettingsForm.get('iconColor').value?.color"
@@ -67,7 +67,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.value-card.value</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
         </tb-font-settings>
@@ -75,12 +75,12 @@
         </tb-color-settings>
       </div>
     </div>
-    <div [fxShow]="dateEnabled" class="tb-form-row column-xs">
+    <div [class.!hidden]="!dateEnabled" class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
index 661761fb3b..52d4f1ea8a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
@@ -39,7 +39,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showValue">
         {{ 'widgets.value-chart-card.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           [autoScale]="valueChartCardWidgetSettingsForm.get('autoScale').value"
                           [previewText]="valuePreviewFn">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
index e7ca744685..bacacd2aab 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
@@ -32,7 +32,7 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarLabel">
           {{ 'widgets.bar-chart.label-on-bar' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="barLabelFont"
                             disabledLineHeight
                             forceSizeUnit="px"
@@ -48,7 +48,7 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarValue">
           {{ 'widgets.bar-chart.value-on-bar' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="barValueFont"
                             disabledLineHeight
                             forceSizeUnit="px"
@@ -115,10 +115,9 @@
     </tb-time-series-chart-thresholds-panel>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetSettingsForm.get('showLegend').value" [disabled]="!barChartWidgetSettingsForm.get('showLegend').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
               {{ 'widget-config.legend' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -136,7 +135,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendLabelFont"
                                 previewText="20 - 30">
               </tb-font-settings>
@@ -151,10 +150,9 @@
     </div>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!barChartWidgetSettingsForm.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widget-config.tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -162,7 +160,7 @@
         <ng-template matExpansionPanelContent>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipLabelFont"
                                 [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipLabelColor').value }"
                                 previewText="Temperature">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html
index 3922858711..88a8508887 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="chartWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="chartWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
     <mat-slide-toggle formControlName="showTooltip" class="slide-block">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
index f8c10fad3d..2f943e67dd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="doughnutChartWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="doughnutChartWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
     <mat-slide-toggle formControlName="showTooltip" class="slide-block">
@@ -24,12 +24,12 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.border-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.border-width</mat-label>
         <input matInput type="number" min="0" formControlName="borderWidth">
       </mat-form-field>
-      <tb-color-input fxFlex
+      <tb-color-input class="flex-1"
                       formControlName="borderColor"
                       icon="format_color_fill"
                       label="{{ 'widgets.chart.border-color' | translate }}" openOnInput colorClearButton>
@@ -39,20 +39,20 @@
   <fieldset class="fields-group fields-group-slider" formGroupName="legend">
     <legend class="group-title" translate>widgets.chart.legend-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="doughnutChartWidgetSettingsForm.get('legend.display').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <mat-slide-toggle formControlName="display" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.chart.display-legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column">
-          <tb-color-input fxFlex
+        <section class="flex flex-col">
+          <tb-color-input class="flex-1"
                           formControlName="labelsFontColor"
                           icon="format_color_fill"
                           label="{{ 'widgets.chart.labels-font-color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html
index 34476180f4..44a0471001 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="flotBarKeySettingsForm" fxLayout="column">
+<section [formGroup]="flotBarKeySettingsForm" class="flex flex-col">
   <tb-flot-key-settings formControlName="flotKeySettings"
                         [aliasController]="aliasController"
                         [chartType]="'bar'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-widget-settings.component.html
index 0abca2f000..501e30a404 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="flotBarWidgetSettingsForm" fxLayout="column">
+<section [formGroup]="flotBarWidgetSettingsForm" class="flex flex-col">
   <tb-flot-widget-settings formControlName="flotSettings"
                            [chartType]="'bar'">
   </tb-flot-widget-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
index 4767f393a8..a92c276534 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
@@ -32,14 +32,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('showLines').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLines" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLines" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.show-line' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -54,7 +53,7 @@
         <mat-slide-toggle class="mat-slide" formControlName="fillLines">
           {{ 'widgets.chart.fill-line' | translate }}
         </mat-slide-toggle>
-        <div [fxShow]="flotKeySettingsFormGroup.get('fillLines').value" class="tb-form-row space-between">
+        <div [class.!hidden]="!flotKeySettingsFormGroup.get('fillLines').value" class="tb-form-row space-between">
           <div>{{ 'widgets.chart.fill-line-opacity' | translate }}</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="fillLinesOpacity" type="number" min="0" max="1" step="0.1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -65,14 +64,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('showPoints').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showPoints" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showPoints" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.show-points' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -116,7 +114,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <tb-js-func [fxShow]="flotKeySettingsFormGroup.get('showPointShape').value === 'custom'"
+        <tb-js-func [class.!hidden]="flotKeySettingsFormGroup.get('showPointShape').value !== 'custom'"
                     formControlName="pointShapeFormatter"
                     [globalVariables]="functionScopeVariables"
                     [functionArgs]="['ctx', 'x', 'y', 'radius', 'shadow']"
@@ -143,7 +141,7 @@
     </mat-slide-toggle>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="axisTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -196,7 +194,7 @@
     </div>
   </div>
   <div class="tb-form-panel">
-    <div class="tb-form-panel-title" fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="tb-form-panel-title flex flex-row items-center justify-between">
       <div translate>widgets.chart.thresholds</div>
       <button mat-stroked-button
               color="primary"
@@ -204,8 +202,8 @@
         <span translate>widgets.chart.add-threshold</span>
       </button>
     </div>
-    <div *ngIf="thresholdsFormArray().length" class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
-         (cdkDropListDropped)="thresholdDrop($event)" fxLayout="column" fxLayoutGap="12px">
+    <div *ngIf="thresholdsFormArray().length" class="tb-control-list tb-drop-list flex flex-col gap-3" cdkDropList cdkDropListOrientation="vertical"
+         (cdkDropListDropped)="thresholdDrop($event)">
       <div cdkDrag class="tb-draggable" *ngFor="let thresholdControl of thresholdsFormArray().controls; trackBy: trackByThreshold;
                  let $index = index;">
         <tb-flot-threshold [formControl]="thresholdControl"
@@ -219,10 +217,9 @@
     <div class="tb-form-panel-title" translate>widgets.chart.comparison-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').value"
                          [disabled]="!flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showValuesForComparison" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showValuesForComparison" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.show-values-for-comparison' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -230,7 +227,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widgets.chart.comparison-values-label</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="comparisonValuesLabel" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
index ac25ef7a59..107d1d1b9c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
@@ -20,10 +20,9 @@
     <div class="tb-form-panel-title" translate>widgets.chart.threshold-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotLatestKeySettingsForm.get('useAsThreshold').value"
                          [disabled]="!flotLatestKeySettingsForm.get('useAsThreshold').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useAsThreshold" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useAsThreshold" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.use-as-threshold' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html
index 649c5a722c..6c11feed20 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="flotLineKeySettingsForm" fxLayout="column">
+<section [formGroup]="flotLineKeySettingsForm" class="flex flex-col">
   <tb-flot-key-settings formControlName="flotKeySettings"
                         [aliasController]="aliasController"
                         [chartType]="'graph'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-widget-settings.component.html
index 9e9317a247..cd6d6f8b12 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="flotLineWidgetSettingsForm" fxLayout="column">
+<section [formGroup]="flotLineWidgetSettingsForm" class="flex flex-col">
   <tb-flot-widget-settings formControlName="flotSettings"
                            [chartType]="'graph'">
   </tb-flot-widget-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
index 0ce2a8ce71..8c530f7971 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="flotPieKeySettingsForm" fxLayout="column">
-  <fieldset class="fields-group" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="flotPieKeySettingsForm">
+  <fieldset class="fields-group flex flex-col">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
     <mat-checkbox formControlName="hideDataByDefault">
       {{ 'widgets.chart.data-is-hidden-by-default' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
index 11dcbbeb84..8d2ee44d5d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
@@ -15,25 +15,25 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="flotPieWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="flotPieWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.common-pie-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.radius</mat-label>
         <input matInput type="number" step="0.1" min="0" max="1" formControlName="radius">
         <mat-error *ngIf="flotPieWidgetSettingsForm.get('radius').hasError('min') || flotPieWidgetSettingsForm.get('radius').hasError('max')">
           {{ 'widgets.chart.common-pie-settings-range-error' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.inner-radius</mat-label>
         <input matInput type="number" step="0.1" min="0" max="1" formControlName="innerRadius">
         <mat-error *ngIf="flotPieWidgetSettingsForm.get('innerRadius').hasError('min') || flotPieWidgetSettingsForm.get('innerRadius').hasError('max')">
           {{ 'widgets.chart.common-pie-settings-range-error' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.tilt</mat-label>
         <input matInput type="number" step="0.1" min="0" max="1" formControlName="tilt">
         <mat-error *ngIf="flotPieWidgetSettingsForm.get('tilt').hasError('min') || flotPieWidgetSettingsForm.get('tilt').hasError('max')">
@@ -50,12 +50,12 @@
   </fieldset>
   <fieldset class="fields-group" formGroupName="stroke">
     <legend class="group-title" translate>widgets.chart.stroke-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.width-pixels</mat-label>
         <input matInput type="number" min="0" formControlName="width">
       </mat-form-field>
-      <tb-color-input fxFlex
+      <tb-color-input class="flex-1"
         formControlName="color"
         icon="format_color_fill"
         label="{{ 'widgets.chart.color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
index ef7ad17878..5ab501b830 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
@@ -18,7 +18,7 @@
 <div class="tb-form-row no-border no-padding column-lt-md" style="gap: 10px;" [formGroup]="thresholdFormGroup">
   <tb-value-source style="flex: 1" [aliasController]="aliasController" formControlName="valueSource"></tb-value-source>
   <div class="tb-form-row no-border no-padding" style="gap: 10px;">
-      <mat-form-field fxFlex.lt-md appearance="outline" class="number" subscriptSizing="dynamic">
+      <mat-form-field appearance="outline" class="number lt-md:flex-1" subscriptSizing="dynamic">
         <input matInput formControlName="lineWidth" type="number" min="0" placeholder="{{ 'widgets.chart.line-width' | translate }}">
       </mat-form-field>
       <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
index 001f606719..cea091fda6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
@@ -63,7 +63,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.chart.default-font' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="fontSize" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
           <span matSuffix>px</span>
@@ -77,14 +77,13 @@
   <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widget-config.legend</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -100,7 +99,7 @@
       <div class="tb-form-panel-title" translate>widgets.chart.vertical-axis</div>
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
       </div>
@@ -119,14 +118,13 @@
       <div class="tb-form-panel stroked tb-slide-toggle">
         <div class="tb-form-panel-title" translate>widgets.chart.ticks</div>
         <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('yaxis.showLabels').value">
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
             <mat-panel-title>
-              <mat-slide-toggle class="mat-slide" formControlName="showLabels" (click)="$event.stopPropagation()"
-                                fxLayoutAlign="center">
+              <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLabels" (click)="$event.stopPropagation()">
                 {{ 'widgets.chart.ticks' | translate }}
               </mat-slide-toggle>
             </mat-panel-title>
-            <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+            <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
               widget-config.advanced-settings
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -164,21 +162,20 @@
       <div class="tb-form-panel-title" translate>widgets.chart.horizontal-axis</div>
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
       </div>
       <div class="tb-form-panel stroked tb-slide-toggle">
         <div class="tb-form-panel-title" translate>widgets.chart.ticks</div>
         <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('xaxis.showLabels').value">
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
             <mat-panel-title>
-              <mat-slide-toggle class="mat-slide" formControlName="showLabels" (click)="$event.stopPropagation()"
-                                fxLayoutAlign="center">
+              <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLabels" (click)="$event.stopPropagation()">
                 {{ 'widgets.chart.ticks' | translate }}
               </mat-slide-toggle>
             </mat-panel-title>
-            <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+            <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
               widget-config.advanced-settings
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -214,7 +211,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.chart.border' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="outlineWidth" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
           <span matSuffix>px</span>
@@ -234,14 +231,13 @@
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.chart.tooltip</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -274,14 +270,13 @@
   <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.chart.comparison-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('comparisonEnabled').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="comparisonEnabled" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.enable-comparison' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -311,7 +306,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <div [fxShow]="flotSettingsFormGroup.get('timeForComparison').value === 'customInterval'" class="tb-form-row space-between">
+        <div [class.!hidden]="flotSettingsFormGroup.get('timeForComparison').value !== 'customInterval'" class="tb-form-row space-between">
           <div translate>widgets.chart.custom-interval-value</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="comparisonCustomIntervalValue" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
@@ -321,7 +316,7 @@
           <div class="tb-form-panel-title" translate>widgets.chart.comparison-x-axis-settings</div>
           <div class="tb-form-row">
             <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
-            <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
               <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
           </div>
@@ -350,26 +345,25 @@
   <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.chart.custom-legend-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('customLegendEnabled').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="customLegendEnabled" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="customLegendEnabled" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.enable-custom-legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="tb-form-panel stroked">
           <div class="tb-form-panel-title" translate>widgets.chart.label-keys-list</div>
-          <div fxLayout="column">
+          <div class="flex flex-col">
             <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
                  (cdkDropListDropped)="labelDataKeyDrop($event)">
-              <div cdkDrag class="tb-draggable" *ngFor="let labelDataKeyControl of dataKeysListForLabelsFormArray().controls; trackBy: trackByLabelDataKey;
+              <div cdkDrag class="tb-draggable flex flex-col" *ngFor="let labelDataKeyControl of dataKeysListForLabelsFormArray().controls; trackBy: trackByLabelDataKey;
                  let $index = index; last as isLast;"
-                   fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+                   [class.pb-2]="!isLast">
                 <tb-label-data-key [formControl]="labelDataKeyControl"
                                    [expanded]="labelDataKeyControl.new"
                                    (removeLabelDataKey)="removeLabelDataKey($index)">
@@ -377,8 +371,8 @@
               </div>
             </div>
             <div *ngIf="!dataKeysListForLabelsFormArray().controls.length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">widgets.chart.no-label-keys</span>
+            <span translate
+                  class="tb-prompt flex items-center justify-center">widgets.chart.no-label-keys</span>
             </div>
             <div style="padding-top: 16px;">
               <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
index 2c93302a59..a2de509c44 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="label-data-key" fxFlex [formGroup]="labelDataKeyFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="label-data-key flex=1" [formGroup]="labelDataKeyFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           {{ labelDataKeyText() }}
         </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)="removeLabelDataKey.emit()"
@@ -34,18 +34,18 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <section class="tb-widget-settings" fxLayout="column">
-        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-          <mat-form-field fxFlex class="mat-block">
+      <section class="tb-widget-settings flex flex-col">
+        <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.chart.key-name</mat-label>
             <input required matInput formControlName="name">
             <mat-error *ngIf="labelDataKeyFormGroup.get('name').hasError('required')">
               {{ 'widgets.chart.key-name-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>widgets.chart.key-type</mat-label>
             <mat-select formControlName="type">
               <mat-option [value]="'attribute'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
index bf00900f47..42416e54b2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
@@ -19,10 +19,9 @@
   <ng-container *ngTemplateOutlet="latestChartConfigTemplate()"></ng-container>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetSettingsForm.get('showLegend').value" [disabled]="!latestChartWidgetSettingsForm.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -40,7 +39,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               previewText="Wind power">
             </tb-font-settings>
@@ -52,7 +51,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendValueFont"
                               [previewText]="valuePreviewFn">
             </tb-font-settings>
@@ -67,10 +66,9 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!latestChartWidgetSettingsForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -78,7 +76,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between column-xs">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="tooltipValueType">
                 <mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type">
@@ -88,7 +86,7 @@
             </mat-form-field>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-              <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+              <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
             </mat-form-field>
             <tb-font-settings formControlName="tooltipValueFont"
                               [previewText]="tooltipValuePreviewFn">
@@ -143,8 +141,8 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
           {{ 'widgets.pie-chart.label' | translate }}
         </mat-slide-toggle>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="labelPosition">
               <mat-option *ngFor="let position of pieChartLabelPositions" [value]="position">
                 {{ pieChartLabelPositionTranslationMap.get(position) | translate }}
@@ -164,7 +162,7 @@
       </div>
       <div class="tb-form-row space-between">
         <div>{{ 'widgets.pie-chart.border' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="borderWidth" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <div matSuffix>px</div>
@@ -177,7 +175,7 @@
       </div>
       <div class="tb-form-row space-between">
         <div>{{ 'widgets.pie-chart.radius' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="radius" type="number" min="0" max="100" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <div matSuffix>%</div>
@@ -228,9 +226,9 @@
           {{ 'widgets.latest-chart.sort-series' | translate }}
         </mat-slide-toggle>
       </div>
-      <div [fxShow]="doughnutTotalEnabled" class="tb-form-row space-between">
+      <div [class.!hidden]="!doughnutTotalEnabled" class="tb-form-row space-between">
         <div>{{ 'widgets.doughnut.central-total-value' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="totalValueFont"
                             [previewText]="valuePreviewFn">
           </tb-font-settings>
@@ -261,7 +259,7 @@
         <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-axis</div>
         <div class="tb-form-row space-between column-xs">
           <div translate>widgets.chart.chart-axis.scale</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="axisMin"
@@ -309,7 +307,7 @@
         <div class="tb-form-panel-title" translate>widgets.polar-area-chart.polar-axis</div>
         <div class="tb-form-row space-between column-xs">
           <div translate>widgets.chart.chart-axis.scale</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="axisMin"
@@ -374,8 +372,8 @@
           <mat-slide-toggle class="mat-slide" formControlName="showLine">
             {{ 'widgets.radar-chart.line' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
+          <div class="flex flex-row items-center justify-start gap-2">
+            <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="lineType">
                 <mat-option *ngFor="let type of chartLineTypes" [value]="type">
                   {{ chartLineTypeTranslations.get(type) | translate }}
@@ -392,8 +390,8 @@
           <mat-slide-toggle class="mat-slide" formControlName="showPoints">
             {{ 'widgets.radar-chart.points' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
+          <div class="flex flex-row items-center justify-start gap-2">
+            <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="pointShape">
                 <mat-option *ngFor="let shape of chartShapes" [value]="shape">
                   {{ chartShapeTranslations.get(shape) | translate }}
@@ -410,8 +408,8 @@
           <mat-slide-toggle class="mat-slide" formControlName="showLabel">
             {{ 'widgets.radar-chart.points-label' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+          <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
+            <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="labelPosition">
                 <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
                   {{ chartLabelPositionTranslations.get(position) | translate }}
@@ -451,7 +449,7 @@
           <mat-slide-toggle class="mat-slide" formControlName="axisShowTickLabels">
             {{ 'widgets.radar-chart.ticks-label' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="axisTickLabelFont"
                               clearButton
                               disabledLineHeight
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
index a7ced000bf..c435aa0444 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
@@ -118,8 +118,8 @@
               {{ 'widgets.time-series-chart.series.point.point-label' | translate }}
             </div>
           </mat-slide-toggle>
-          <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+          <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
+            <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="pointLabelPosition">
                 <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
                   {{ chartLabelPositionTranslations.get(position) | translate }}
@@ -191,10 +191,9 @@
     </tb-time-series-chart-thresholds-panel>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetSettingsForm.get('showLegend').value" [disabled]="!rangeChartWidgetSettingsForm.get('showLegend').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
               {{ 'widget-config.legend' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -212,7 +211,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendLabelFont"
                                 previewText="20 - 30">
               </tb-font-settings>
@@ -227,10 +226,9 @@
     </div>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!rangeChartWidgetSettingsForm.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widget-config.tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -238,7 +236,7 @@
         <ng-template matExpansionPanelContent>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipLabelFont"
                                 [initialPreviewStyle]="{ color: rangeChartWidgetSettingsForm.get('tooltipLabelColor').value }"
                                 previewText="Temperature">
@@ -251,7 +249,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.value' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipValueFont"
                                 [initialPreviewStyle]="{ color: rangeChartWidgetSettingsForm.get('tooltipValueColor').value }"
                                 [previewText]="tooltipValuePreviewFn">
@@ -266,8 +264,8 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
               {{ 'tooltip.date' | translate }}
             </mat-slide-toggle>
-            <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-              <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+            <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+              <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                      formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [initialPreviewStyle]="{ color: rangeChartWidgetSettingsForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html
index 1299f0574a..0e7c618c5e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html
@@ -42,17 +42,17 @@
     </div>
   </div>
   <div class="tb-form-panel">
-    <div *ngIf="chartType === TimeSeriesChartType.default; else chartTypeTitle" fxLayout="row" fxLayoutAlign="space-between center">
+    <div *ngIf="chartType === TimeSeriesChartType.default; else chartTypeTitle" class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>widgets.time-series-chart.series.series-type</div>
       <tb-toggle-select formControlName="type">
         <tb-toggle-option *ngFor="let type of timeSeriesChartSeriesTypes" [value]="type">{{ timeSeriesChartSeriesTypeTranslations.get(type) | translate }}</tb-toggle-option>
       </tb-toggle-select>
     </div>
-    <tb-time-series-chart-line-settings [fxShow]="timeSeriesChartKeySettingsForm.get('type').value === TimeSeriesChartSeriesType.line"
+    <tb-time-series-chart-line-settings [class.!hidden]="timeSeriesChartKeySettingsForm.get('type').value !== TimeSeriesChartSeriesType.line"
                                         [chartType]="chartType"
                                         formControlName="lineSettings">
     </tb-time-series-chart-line-settings>
-    <tb-chart-bar-settings [fxShow]="timeSeriesChartKeySettingsForm.get('type').value === TimeSeriesChartSeriesType.bar"
+    <tb-chart-bar-settings [class.!hidden]="timeSeriesChartKeySettingsForm.get('type').value !== TimeSeriesChartSeriesType.bar"
                                      formControlName="barSettings">
     </tb-chart-bar-settings>
   </div>
@@ -70,10 +70,9 @@
     <div class="tb-form-panel-title" translate>widgets.time-series-chart.comparison.settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartKeySettingsForm.get('comparisonSettings.showValuesForComparison').value"
                          [disabled]="!timeSeriesChartKeySettingsForm.get('comparisonSettings.showValuesForComparison').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showValuesForComparison" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showValuesForComparison" (click)="$event.stopPropagation()">
             {{ 'widgets.time-series-chart.comparison.show-values-for-comparison' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -81,7 +80,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widgets.time-series-chart.comparison.comparison-values-label</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="comparisonValuesLabel" placeholder="{{ 'widgets.time-series-chart.comparison.comparison-values-label-auto' | translate }}">
           </mat-form-field>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html
index e71113cdbf..f0c347f478 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html
@@ -77,8 +77,8 @@
         {{ 'widgets.time-series-chart.series.point.point-label' | translate }}
       </div>
     </mat-slide-toggle>
-    <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+    <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
+      <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="pointLabelPosition">
           <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
             {{ chartLabelPositionTranslations.get(position) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
index 79a517a7d8..5b6d0a258b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
@@ -21,7 +21,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="comparisonEnabled">
         {{ 'widgets.time-series-chart.comparison.comparison' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="timeForComparison">
             <mat-option [value]="'previousInterval'">
@@ -44,7 +44,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field [fxShow]="timeSeriesChartWidgetSettingsForm.get('timeForComparison').value === 'customInterval'"
+        <mat-form-field [class.!hidden]="timeSeriesChartWidgetSettingsForm.get('timeForComparison').value !== 'customInterval'"
                         appearance="outline" class="number flex-lt-md" subscriptSizing="dynamic">
           <input matInput formControlName="comparisonCustomIntervalValue" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -105,10 +105,9 @@
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetSettingsForm.get('showLegend').value"
                            [disabled]="!timeSeriesChartWidgetSettingsForm.get('showLegend').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
               {{ 'widget-config.legend' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -116,7 +115,7 @@
         <ng-template matExpansionPanelContent>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendLabelFont"
                                 [initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendLabelColor').value}"
                                 previewText="Temperature">
@@ -129,7 +128,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.value' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendValueFont"
                                 [initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendValueColor').value}"
                                 previewText="22 °C">
@@ -142,7 +141,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.column-title' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendColumnTitleFont"
                                 [initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendColumnTitleColor').value}"
                                 previewText="{{ 'legend.Avg' | translate }}">
@@ -162,10 +161,9 @@
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetSettingsForm.get('showTooltip').value"
                            [disabled]="!timeSeriesChartWidgetSettingsForm.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widget-config.tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -182,7 +180,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipLabelFont"
                                 [initialPreviewStyle]="{ color: timeSeriesChartWidgetSettingsForm.get('tooltipLabelColor').value }"
                                 previewText="Temperature">
@@ -195,7 +193,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.value' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipValueFont"
                                 [initialPreviewStyle]="{ color: timeSeriesChartWidgetSettingsForm.get('tooltipValueColor').value }"
                                 [previewText]="tooltipValuePreviewFn">
@@ -217,8 +215,8 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
               {{ 'tooltip.date' | translate }}
             </mat-slide-toggle>
-            <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-              <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+            <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+              <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                      formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [initialPreviewStyle]="{ color: timeSeriesChartWidgetSettingsForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index 4330a41473..b5eb1d077f 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -68,6 +68,9 @@ module.exports = {
       'gt-xmd': {
         min: '1600px'
       },
+      'gt-md-lg': {
+        min: '1820px'
+      },
       'gt-lg': {
         min: '1920px'
       },
@@ -77,6 +80,7 @@ module.exports = {
     },
     extend: {
       flexBasis: {
+        '7.5': '1.875rem',
         '25': '6.25rem',
         '37.5': '9.375rem'
       },
@@ -91,6 +95,7 @@ module.exports = {
         '19': '4.75rem'
       },
       minWidth: {
+        '7.5': '1.875rem',
         '25': '6.25rem',
         '37.5': '9.375rem'
       },
@@ -136,6 +141,7 @@ module.exports = {
         '8/12': '66.666667%',
         '10/12': '83.333333%',
         '11/12': '91.666667%',
+        '7.5': '1.875rem',
         '25': '6.25rem',
         '37.5': '9.375rem'
       }