From 78dd5bdcfe36b45866e5f6226c12e45ea122a8ed Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 16 Oct 2024 13:28:46 +0300
Subject: [PATCH] Flex layout replacements. Switch to tailwind.css.

---
 ...custom-action-pretty-editor.component.html |   9 +-
 ...ction-pretty-resources-tabs.component.html |   5 +-
 .../common/action/custom-sample-html.raw      | 138 +++++++++---------
 ...value-action-settings-panel.component.html |  17 +--
 .../mobile-action-editor.component.html       |   2 +-
 ...value-action-settings-panel.component.html |  17 +--
 .../action/widget-action.component.html       |  16 +-
 .../widget-button-appearance.component.html   |  12 +-
 ...t-button-custom-style-panel.component.html |   2 +-
 .../chart-animation-settings.component.html   |   5 +-
 .../chart/chart-bar-settings.component.html   |   4 +-
 .../chart/chart-fill-settings.component.html  |   2 +-
 ...-series-chart-axis-settings.component.html |  15 +-
 ...-series-chart-grid-settings.component.html |   7 +-
 ...time-series-chart-state-row.component.html |   2 +-
 ...e-series-chart-states-panel.component.html |   5 +-
 ...rt-threshold-settings-panel.component.html |   8 +-
 ...ries-chart-thresholds-panel.component.html |   5 +-
 ...e-series-chart-y-axes-panel.component.html |   6 +-
 ...regation-bar-width-settings.component.html |   8 +-
 ...tatus-widget-state-settings.component.html |  40 ++---
 ...cada-symbol-object-settings.component.html |   8 +-
 .../device-key-autocomplete.component.html    |   2 +-
 ...nob-control-widget-settings.component.html |  26 ++--
 ...d-indicator-widget-settings.component.html |  26 ++--
 ...stent-table-widget-settings.component.html |  22 +--
 ...ound-switch-widget-settings.component.html |   4 +-
 .../control/rpc-button-style.component.html   |   8 +-
 .../rpc-shell-widget-settings.component.html  |   4 +-
 ...pc-terminal-widget-settings.component.html |  12 +-
 .../send-rpc-widget-settings.component.html   |  18 +--
 ...ngle-switch-widget-settings.component.html |  42 +++---
 ...lide-toggle-widget-settings.component.html |  10 +-
 .../slider-widget-settings.component.html     |  36 ++---
 ...tch-control-widget-settings.component.html |   4 +-
 .../switch-rpc-settings.component.html        |  26 ++--
 ...e-attribute-widget-settings.component.html |   8 +-
 37 files changed, 287 insertions(+), 294 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html
index bc8d53ae12..d3ed0298ab 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html
@@ -16,9 +16,10 @@
 
 -->
 <div class="tb-custom-action-pretty" tb-fullscreen [fullscreen]="fullscreen">
-  <div fxLayout="row" fxLayoutAlign="end center" class="tb-action-expand-button" [ngClass]="{'tb-fullscreen-editor': fullscreen}">
+  <div class="tb-action-expand-button flex flex-row items-center justify-end" [class.tb-fullscreen-editor]="fullscreen">
     <button *ngIf="!fullscreen"
-            mat-icon-button fxHide.lt-md
+            class="lt-md:!hidden"
+            mat-icon-button
             matTooltip="{{ 'widget.toggle-fullscreen' | translate }}"
             matTooltipPosition="above"
             (click)="fullscreen = true">
@@ -33,14 +34,14 @@
       <span translate>widget.toggle-fullscreen</span>
     </button>
   </div>
-  <div class="tb-custom-action-editor" [ngClass]="{'tb-fullscreen-editor': fullscreen}">
+  <div class="tb-custom-action-editor" [class.tb-fullscreen-editor]="fullscreen">
     <div *ngIf="!fullscreen; else fullscreenEditor">
       <tb-custom-action-pretty-resources-tabs [hasCustomFunction]="true"
                                               [action]="action" (actionUpdated)="onActionUpdated($event ? true : false)">
       </tb-custom-action-pretty-resources-tabs>
     </div>
     <ng-template #fullscreenEditor>
-      <div class="tb-fullscreen-panel tb-layout-fill" fxLayout="row">
+      <div class="tb-fullscreen-panel tb-layout-fill flex flex-row">
         <div #leftPanel class="tb-split tb-content">
           <tb-custom-action-pretty-resources-tabs [hasCustomFunction]="false"
                                                   [action]="action" (actionUpdated)="onActionUpdated($event ? true : false)">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html
index f9610ecbee..eb2e0b5808 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html
@@ -19,10 +19,9 @@
   <mat-tab label="{{ 'widget.resources' | translate }}" style="width: 100%; height: 100%;">
     <div class="tb-custom-action-editor-container" style="background-color: #fff;">
       <div class="mat-padding">
-        <div fxFlex fxLayout="row"
-             fxLayoutAlign="start center"
+        <div class="flex flex-1 flex-row items-center justify-start"
              *ngFor="let resource of action.customResources; let i = index" style="padding-top: 10px;">
-          <tb-resource-autocomplete fxFlex class="mat-block"
+          <tb-resource-autocomplete class="mat-block flex-1"
                                     subscriptSizing="dynamic"
                                     hideRequiredMarker required
                                     [allowAutocomplete]="resource.isModule"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-sample-html.raw b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-sample-html.raw
index 95e11ccef6..734773eb87 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-sample-html.raw
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-sample-html.raw
@@ -6,9 +6,9 @@
 <!-- -->
 <!--<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"-->
 <!--      (ngSubmit)="save()"  class="edit-entity-form">-->
-<!--    <mat-toolbar fxLayout="row" color="primary">-->
+<!--    <mat-toolbar class="flex flex-row" color="primary">-->
 <!--        <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>-->
-<!--        <span fxFlex></span>-->
+<!--        <span class="flex-1"></span>-->
 <!--        <button mat-icon-button (click)="cancel()" type="button">-->
 <!--            <mat-icon class="material-icons">close</mat-icon>-->
 <!--        </button>-->
@@ -16,57 +16,57 @@
 <!--    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
 <!--    </mat-progress-bar>-->
 <!--    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
-<!--    <div mat-dialog-content fxLayout="column">-->
-<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--    <div mat-dialog-content class="flex flex-col">-->
+<!--        <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Name</mat-label>-->
 <!--                <input matInput formControlName="entityName" required readonly="">-->
 <!--            </mat-form-field>-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Label</mat-label>-->
 <!--                <input matInput formControlName="entityLabel">-->
 <!--            </mat-form-field>-->
 <!--        </div>-->
-<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--        <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Type</mat-label>-->
 <!--                <input matInput formControlName="entityType" readonly>-->
 <!--            </mat-form-field>-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Type</mat-label>-->
 <!--                <input matInput formControlName="type" readonly>-->
 <!--            </mat-form-field>-->
 <!--        </div>-->
-<!--        <div formGroupName="attributes" fxLayout="column">-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--        <div formGroupName="attributes" class="flex flex-col">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Latitude</mat-label>-->
 <!--                    <input type="number" step="any" matInput formControlName="latitude">-->
 <!--                </mat-form-field>-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Longitude</mat-label>-->
 <!--                    <input type="number" step="any" matInput formControlName="longitude">-->
 <!--                </mat-form-field>-->
 <!--            </div>-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Address</mat-label>-->
 <!--                    <input matInput formControlName="address">-->
 <!--                </mat-form-field>-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Owner</mat-label>-->
 <!--                    <input matInput formControlName="owner">-->
 <!--                </mat-form-field>-->
 <!--            </div>-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Integer Value</mat-label>-->
 <!--                    <input type="number" step="1" matInput formControlName="number">-->
 <!--                    <mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">-->
 <!--                        Invalid integer value.-->
 <!--                    </mat-error>-->
 <!--                </mat-form-field>-->
-<!--                <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
+<!--                <div class="boolean-value-input flex flex-1 flex-col items-start justify-center">-->
 <!--                    <label class="checkbox-label">Boolean Value</label>-->
 <!--                    <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
 <!--                        {{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}-->
@@ -76,12 +76,12 @@
 <!--        </div>-->
 <!--        <div class="relations-list old-relations">-->
 <!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
-<!--            <div class="body" [fxShow]="oldRelations().length">-->
-<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations" -->
+<!--            <div class="body" [class.!hidden]="!oldRelations().length">-->
+<!--                <div class="row flex flex-row items-center justify-start" formArrayName="oldRelations" -->
 <!--                     *ngFor="let relation of oldRelations().controls; let i = index;">-->
-<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
-<!--                        <div fxFlex fxLayout="column">-->
-<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div class="flex flex-1 flex-col">-->
+<!--                            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
 <!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
 <!--                                    <mat-label>Direction</mat-label>-->
 <!--                                    <mat-select formControlName="direction" name="direction">-->
@@ -94,20 +94,20 @@
 <!--                                    </mat-error>-->
 <!--                                </mat-form-field>-->
 <!--                                <tb-relation-type-autocomplete-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        formControlName="relationType"-->
 <!--                                        required="true">-->
 <!--                                </tb-relation-type-autocomplete>-->
 <!--                            </div>-->
-<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                            <div class="flex flex-row xs:flex-col">-->
 <!--                                <tb-entity-select-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        required="true"-->
 <!--                                        formControlName="relatedEntity">-->
 <!--                                </tb-entity-select>-->
 <!--                            </div>-->
 <!--                        </div>-->
-<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                        <div class="flex flex-col items-center justify-center">-->
 <!--                            <button mat-icon-button color="primary"-->
 <!--                                    aria-label="Remove"-->
 <!--                                    type="button"-->
@@ -123,11 +123,11 @@
 <!--        </div>-->
 <!--        <div class="relations-list">-->
 <!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>-->
-<!--            <div class="body" [fxShow]="relations().length">-->
-<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
-<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
-<!--                        <div fxFlex fxLayout="column">-->
-<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <div class="body" [class.!hidden]="!relations().length">-->
+<!--                <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div class="flex flex-1 flex-col">-->
+<!--                            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
 <!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
 <!--                                    <mat-label>Direction</mat-label>-->
 <!--                                    <mat-select formControlName="direction" name="direction">-->
@@ -140,20 +140,20 @@
 <!--                                    </mat-error>-->
 <!--                                </mat-form-field>-->
 <!--                                <tb-relation-type-autocomplete-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        formControlName="relationType"-->
 <!--                                        [required]="true">-->
 <!--                                </tb-relation-type-autocomplete>-->
 <!--                            </div>-->
-<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                            <div class="flex flex-row xs:flex-col">-->
 <!--                                <tb-entity-select-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        [required]="true"-->
 <!--                                        formControlName="relatedEntity">-->
 <!--                                </tb-entity-select>-->
 <!--                            </div>-->
 <!--                        </div>-->
-<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                        <div class="flex flex-col items-center justify-center">-->
 <!--                            <button mat-icon-button color="primary"-->
 <!--                                    aria-label="Remove"-->
 <!--                                    type="button"-->
@@ -177,7 +177,7 @@
 <!--            </div>-->
 <!--        </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)"-->
@@ -198,9 +198,9 @@
 <!---->
 <!--<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"-->
 <!--      (ngSubmit)="save()" class="add-entity-form">-->
-<!--    <mat-toolbar fxLayout="row" color="primary">-->
+<!--    <mat-toolbar class="flex flex-row" color="primary">-->
 <!--        <h2>Add entity</h2>-->
-<!--        <span fxFlex></span>-->
+<!--        <span class="flex-1"></span>-->
 <!--        <button mat-icon-button (click)="cancel()" type="button">-->
 <!--            <mat-icon class="material-icons">close</mat-icon>-->
 <!--        </button>-->
@@ -208,21 +208,21 @@
 <!--    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
 <!--    </mat-progress-bar>-->
 <!--    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
-<!--    <div mat-dialog-content fxLayout="column">-->
-<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--    <div mat-dialog-content class="flex flex-col">-->
+<!--        <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Name</mat-label>-->
 <!--                <input matInput formControlName="entityName" required>-->
 <!--                <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">-->
 <!--                    Entity name is required.-->
 <!--                </mat-error>-->
 <!--            </mat-form-field>-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Label</mat-label>-->
 <!--                <input matInput formControlName="entityLabel" >-->
 <!--            </mat-form-field>-->
 <!--        </div>-->
-<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--        <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
 <!--            <tb-entity-type-select-->
 <!--                    class="mat-block"-->
 <!--                    formControlName="entityType"-->
@@ -230,50 +230,50 @@
 <!--                    [allowedEntityTypes]="allowedEntityTypes"-->
 <!--            ></tb-entity-type-select>-->
 <!--            <tb-entity-subtype-autocomplete-->
-<!--                    fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"-->
-<!--                    class="mat-block"-->
+<!--                    *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"-->
+<!--                    class="mat-block flex-1"-->
 <!--                    formControlName="type"-->
 <!--                    [required]="true"-->
 <!--                    [entityType]="'ASSET'"-->
 <!--            ></tb-entity-subtype-autocomplete>-->
 <!--            <tb-entity-subtype-autocomplete-->
-<!--                    fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"-->
-<!--                    class="mat-block"-->
+<!--                    *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"-->
+<!--                    class="mat-block flex-1"-->
 <!--                    formControlName="type"-->
 <!--                    [required]="true"-->
 <!--                    [entityType]="'DEVICE'"-->
 <!--            ></tb-entity-subtype-autocomplete>-->
 <!--        </div>-->
-<!--        <div formGroupName="attributes" fxLayout="column">-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--        <div formGroupName="attributes" class="flex flex-col">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Latitude</mat-label>-->
 <!--                    <input type="number" step="any" matInput formControlName="latitude">-->
 <!--                </mat-form-field>-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Longitude</mat-label>-->
 <!--                    <input type="number" step="any" matInput formControlName="longitude">-->
 <!--                </mat-form-field>-->
 <!--            </div>-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Address</mat-label>-->
 <!--                    <input matInput formControlName="address">-->
 <!--                </mat-form-field>-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Owner</mat-label>-->
 <!--                    <input matInput formControlName="owner">-->
 <!--                </mat-form-field>-->
 <!--            </div>-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Integer Value</mat-label>-->
 <!--                    <input type="number" step="1" matInput formControlName="number">-->
 <!--                    <mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">-->
 <!--                        Invalid integer value.-->
 <!--                    </mat-error>-->
 <!--                </mat-form-field>-->
-<!--                <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
+<!--                <div class="boolean-value-input flex flex-1 flex-col items-center justify-start">-->
 <!--                    <label class="checkbox-label">Boolean Value</label>-->
 <!--                    <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
 <!--                        {{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}-->
@@ -283,11 +283,11 @@
 <!--        </div>-->
 <!--        <div class="relations-list">-->
 <!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
-<!--            <div class="body" [fxShow]="relations().length">-->
-<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
-<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
-<!--                        <div fxFlex fxLayout="column">-->
-<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <div class="body" [class.!hidden]="!relations().length">-->
+<!--                <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div class="flex flex-1 flex-col">-->
+<!--                            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
 <!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
 <!--                                    <mat-label>Direction</mat-label>-->
 <!--                                    <mat-select formControlName="direction" name="direction">-->
@@ -300,20 +300,20 @@
 <!--                                    </mat-error>-->
 <!--                                </mat-form-field>-->
 <!--                                <tb-relation-type-autocomplete-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        formControlName="relationType"-->
 <!--                                        [required]="true">-->
 <!--                                </tb-relation-type-autocomplete>-->
 <!--                            </div>-->
-<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                            <div class="flex flex-row xs:flex-col">-->
 <!--                                <tb-entity-select-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        [required]="true"-->
 <!--                                        formControlName="relatedEntity">-->
 <!--                                </tb-entity-select>-->
 <!--                            </div>-->
 <!--                        </div>-->
-<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                        <div class="flex flex-col items-center justify-center">-->
 <!--                            <button mat-icon-button color="primary"-->
 <!--                                    aria-label="Remove"-->
 <!--                                    type="button"-->
@@ -337,7 +337,7 @@
 <!--            </div>-->
 <!--        </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/settings/common/action/get-value-action-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
index 9826385d38..4e5e6709a6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
@@ -73,7 +73,7 @@
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.attribute-key' | translate }}*</div>
             <tb-device-key-autocomplete
-              fxFlex
+              class="flex-1"
               formControlName="key"
               required
               requiredText="widgets.value-action.attribute-key-required"
@@ -91,7 +91,7 @@
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.time-series-key' | translate }}*</div>
             <tb-device-key-autocomplete
-              fxFlex
+              class="flex-1"
               formControlName="key"
               required
               requiredText="widgets.value-action.time-series-key-required"
@@ -108,7 +108,7 @@
           class="tb-form-panel stroked" formGroupName="dataToValue">
       <div class="tb-form-row no-padding no-border column-xs">
         <div class="fixed-title-width" translate>widgets.value-action.action-result-converter</div>
-        <tb-toggle-select fxFlex formControlName="type">
+        <tb-toggle-select class="flex-1" formControlName="type">
           <tb-toggle-option [value]="dataToValueType.NONE">{{ 'widgets.value-action.converter-none' | translate }}</tb-toggle-option>
           <tb-toggle-option [value]="dataToValueType.FUNCTION">{{ 'widgets.value-action.converter-function' | translate }}</tb-toggle-option>
         </tb-toggle-select>
@@ -124,7 +124,7 @@
       <div *ngIf="valueType === ValueType.BOOLEAN" class="tb-form-row align-start no-gap column-xs">
         <div class="fixed-title-width fixed-title-height">{{ 'widgets.value-action.state-when-result-is' | translate:{state: stateLabel} }}</div>
         <tb-value-input
-          fxFlex
+          class="flex-1"
           [valueType]="(getValueSettingsFormGroup.get('action').value === getValueAction.GET_DASHBOARD_STATE &&
                         getValueSettingsFormGroup.get('dataToValue').get('type').value === dataToValueType.NONE) ? ValueType.STRING : null"
           layout="column"
@@ -135,10 +135,10 @@
     <div *ngIf="getValueSettingsFormGroup.get('action').value === getValueAction.EXECUTE_RPC"
          class="tb-form-panel no-border tb-slide-toggle" formGroupName="executeRpc">
       <mat-expansion-panel class="tb-settings no-padding">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" translate>
+          <mat-panel-description class="flex items-center justify-end" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -163,10 +163,9 @@
             <mat-expansion-panel class="tb-settings"
                                  [expanded]="getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value"
                                  [disabled]="!getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').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="requestPersistent" (click)="$event.stopPropagation()"
-                                    fxLayoutAlign="center">
+                  <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="requestPersistent" (click)="$event.stopPropagation()">
                     {{ 'widgets.value-action.request-persistent' | translate }}
                   </mat-slide-toggle>
                 </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html
index 458e619185..a3d343e720 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html
@@ -18,7 +18,7 @@
 <div class="tb-form-panel no-padding no-border" [formGroup]="mobileActionFormGroup">
   <div class="tb-form-row">
     <div class="fixed-title-width">{{ 'widget-action.mobile.action-type' | translate }}*</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select required formControlName="type" placeholder="{{ 'widget-action.mobile.select-action-type' | translate }}">
         <mat-option *ngFor="let actionType of mobileActionTypes" [value]="actionType">
           {{ mobileActionTypeTranslations.get(mobileActionType[actionType]) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
index 954f284631..65b6354814 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
@@ -61,7 +61,7 @@
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.attribute-key' | translate }}*</div>
             <tb-device-key-autocomplete
-              fxFlex
+              class="flex-1"
               formControlName="key"
               required
               requiredText="widgets.value-action.attribute-key-required"
@@ -79,7 +79,7 @@
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.time-series-key' | translate }}*</div>
             <tb-device-key-autocomplete
-              fxFlex
+              class="flex-1"
               formControlName="key"
               required
               requiredText="widgets.value-action.time-series-key-required"
@@ -96,7 +96,7 @@
       <div class="tb-form-row no-padding no-border column-xs">
         <div class="fixed-title-width">{{ (setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC ?
           'widgets.value-action.parameters' : 'widgets.value-action.value') | translate }}</div>
-        <tb-toggle-select fxFlex formControlName="type">
+        <tb-toggle-select class="flex-1" formControlName="type">
           <tb-toggle-option *ngIf="valueType !== ValueType.BOOLEAN" [value]="valueToDataType.VALUE">{{ 'widgets.value-action.converter-value' | translate }}</tb-toggle-option>
           <tb-toggle-option *ngIf="valueType === ValueType.BOOLEAN" [value]="valueToDataType.CONSTANT">{{ 'widgets.value-action.converter-constant' | translate }}</tb-toggle-option>
           <tb-toggle-option [value]="valueToDataType.FUNCTION">{{ 'widgets.value-action.converter-function' | translate }}</tb-toggle-option>
@@ -105,7 +105,7 @@
         </tb-toggle-select>
       </div>
       <tb-value-input *ngIf="setValueSettingsFormGroup.get('valueToData').get('type').value === valueToDataType.CONSTANT"
-                      fxFlex
+                      class="flex-1"
                       [layout]="{
                               layout: 'row',
                               breakpoints: {xs: 'column'}
@@ -124,10 +124,10 @@
     <div *ngIf="setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC"
          class="tb-form-panel no-border tb-slide-toggle" formGroupName="executeRpc">
       <mat-expansion-panel class="tb-settings no-padding">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" translate>
+          <mat-panel-description class="flex items-center justify-end" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -152,10 +152,9 @@
             <mat-expansion-panel class="tb-settings"
                                  [expanded]="setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value"
                                  [disabled]="!setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').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="requestPersistent" (click)="$event.stopPropagation()"
-                                    fxLayoutAlign="center">
+                  <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="requestPersistent" (click)="$event.stopPropagation()">
                     {{ 'widgets.value-action.request-persistent' | translate }}
                   </mat-slide-toggle>
                 </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
index be9b067d17..1b3213b251 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
@@ -18,7 +18,7 @@
 <div class="tb-form-panel no-padding no-border" [formGroup]="widgetActionFormGroup">
   <div class="tb-form-row">
     <div translate>widget-config.action</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select required formControlName="type" placeholder="{{ 'widget-config.set' | translate }}">
         <mat-option *ngFor="let actionType of widgetActionTypes" [value]="actionType">
           {{ widgetActionTypeTranslations.get(widgetActionType[actionType]) | translate }}
@@ -30,7 +30,7 @@
     <ng-template [ngSwitchCase]="widgetActionType.openDashboard">
       <div class="tb-form-row">
         <div class="fixed-title-width">{{ 'widget-action.target-dashboard' | translate }}*</div>
-        <tb-dashboard-autocomplete fxFlex
+        <tb-dashboard-autocomplete class="flex-1"
             formControlName="targetDashboardId"
             required
             requiredText="widget-action.target-dashboard-required"
@@ -49,7 +49,7 @@
           <span>{{ 'widget-action.target-dashboard-state' | translate }}</span>
           <span *ngIf="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState">*</span>
         </div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"
                         [class.tb-suffix-absolute]="!actionTypeFormGroup.get('targetDashboardStateId').value">
           <input matInput type="text" placeholder="{{ 'widget-action.target-dashboard-state' | translate }}"
                  #dashboardStateInput
@@ -85,7 +85,7 @@
     <ng-template [ngSwitchCase]="widgetActionType.openURL">
       <div class="tb-form-row">
         <div class="tb-required">{{ 'widget-action.URL' | translate }}</div>
-        <mat-form-field fxFlex style="margin-left: 9px" appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" style="margin-left: 9px" appearance="outline" subscriptSizing="dynamic">
           <input matInput placeholder="{{ 'widget-config.set' | translate }}" formControlName="url">
           <mat-icon matSuffix
                     matTooltipPosition="above"
@@ -127,7 +127,7 @@
       </div>
       <div class="tb-form-row" *ngIf="actionTypeFormGroup.get('setEntityId').value">
         <div class="fixed-title-width">{{ 'alias.state-entity-parameter-name' | translate }}</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput
                  placeholder="{{ 'alias.default-entity-parameter-name' | translate }}"
                  formControlName="stateEntityParamName">
@@ -138,7 +138,7 @@
                                  widgetActionFormGroup.get('type').value : ''">
       <div class="tb-form-row">
         <div class="fixed-title-width">{{ 'widget-action.state-display-type' | translate }}</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="stateDisplayType">
             <mat-option *ngFor="let displayType of allStateDisplayTypes" [value]="displayType">
               {{ stateDisplayTypeName(displayType) }}
@@ -150,7 +150,7 @@
         <ng-template [ngSwitchCase]="'separateDialog'">
           <div class="tb-form-row">
             <div class="fixed-title-width">{{ 'widget-action.dialog-title' | translate }}</div>
-            <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
               <input matInput placeholder="{{ 'widget-config.set' | translate }}" formControlName="dialogTitle">
             </mat-form-field>
           </div>
@@ -191,7 +191,7 @@
         <ng-template [ngSwitchCase]="'popover'">
           <div class="tb-form-row">
             <div class="fixed-title-width">{{ 'widget-action.popover-preferred-placement' | translate }}</div>
-            <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="popoverPreferredPlacement">
                 <mat-option *ngFor="let placement of allPopoverPlacements" [value]="placement">
                   {{ popoverPlacementName(placement) }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
index b6775d0d80..634bc11605 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
@@ -45,11 +45,11 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
       {{ 'widgets.button.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
                                formControlName="icon">
@@ -62,15 +62,15 @@
   </div>
   <div class="tb-form-row space-between column-xs">
     <div>{{ 'widgets.button.color-palette' | 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.button.main</div>
         <tb-color-input asBoxInput
                         formControlName="mainColor">
         </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.button.background</div>
         <tb-color-input asBoxInput
                         formControlName="backgroundColor">
@@ -80,7 +80,7 @@
   </div>
   <div class="tb-form-panel stroked" formGroupName="customStyle">
     <mat-expansion-panel class="tb-settings">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <div class="tb-form-panel-title" translate>widgets.button.custom-styles</div>
         </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html
index 86b5acde6e..e480dfe7c5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html
@@ -77,7 +77,7 @@
         </div>
       </ng-template>
     </mat-menu>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html
index b0a091a5bc..cf96b7236b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html
@@ -19,10 +19,9 @@
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [(expanded)]="settingsExpanded"
                          [disabled]="!animationSettingsFormGroup.get('animation').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="animation" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="animation" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.animation.animation' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html
index 7d3992008a..b863ffdac1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html
@@ -46,8 +46,8 @@
         {{ 'widgets.chart.bar.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 lt-md:flex-1 flex-row items-center justify-start gap-2">
+      <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 }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html
index e56fc1ec00..bcd93ef9a0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html
@@ -35,7 +35,7 @@
     <ng-container *ngIf="fillSettingsFormGroup.get('type').value === ChartFillType.gradient" formGroupName="gradient">
       <div class="tb-form-row space-between column-xs">
         <div translate>widgets.chart.gradient-stops</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.gradient-start</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="start" min="0" max="100" step="1"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
index 49e0b9eab2..f7453b6b7e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
@@ -19,10 +19,9 @@
   <div class="tb-form-panel stroked tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="alwaysExpanded || settingsExpanded"
                          [disabled]="alwaysExpanded || !axisSettingsFormGroup.get('show').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="show" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="show" (click)="$event.stopPropagation()">
             {{ 'widgets.time-series-chart.axis.show' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -30,7 +29,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row column-xs">
           <div class="fixed-title-width" translate>widgets.time-series-chart.axis.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>
@@ -69,7 +68,7 @@
           </mat-form-field>
         </div>
         <div *ngIf="axisType === 'yAxis' && advanced" class="tb-form-row">
-          <tb-js-func fxFlex
+          <tb-js-func class="flex-1"
                       formControlName="ticksGenerator"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['extent']"
@@ -82,7 +81,7 @@
             <mat-slide-toggle class="mat-slide" formControlName="showTickLabels">
               <div translate>widgets.time-series-chart.axis.tick-labels</div>
             </mat-slide-toggle>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-auto-date-format-settings *ngIf="axisType === 'xAxis'"
                                             formControlName="ticksFormat"
                                             [defaultValues]="defaultXAxisTicksFormat">
@@ -100,7 +99,7 @@
             </div>
           </div>
           <div *ngIf="axisType === 'yAxis' && advanced" class="tb-form-row no-border">
-            <tb-js-func fxFlex
+            <tb-js-func class="flex-1"
               formControlName="ticksFormatter"
               [globalVariables]="functionScopeVariables"
               [functionArgs]="['value']"
@@ -162,7 +161,7 @@
     <div *ngIf="axisType === 'yAxis'" class="tb-form-panel no-border no-padding-top">
       <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="min"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-grid-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-grid-settings.component.html
index 1b439e5bea..c7d63e2214 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-grid-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-grid-settings.component.html
@@ -19,10 +19,9 @@
   <div class="tb-form-panel stroked tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [(expanded)]="settingsExpanded"
                          [disabled]="!gridSettingsFormGroup.get('show').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="show" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="show" (click)="$event.stopPropagation()">
             {{ 'widgets.time-series-chart.grid.grid' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -37,7 +36,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'widgets.time-series-chart.grid.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" placeholder="{{ 'widget-config.set' | translate }}">
               <span matSuffix>px</span>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html
index a2e11c3a8e..11e93d734f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html
@@ -33,7 +33,7 @@
     <tb-value-input
         *ngIf="stateFormGroup.get('sourceType').value === TimeSeriesChartStateSourceType.constant"
         formControlName="sourceValue"
-        fxFlex
+        class="flex-1"
         [layout]="{
                     layout: 'column',
                     breakpoints: {'gt-sm': 'row'}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html
index 5db76d1493..6c3e4c481c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html
@@ -27,7 +27,7 @@
     </div>
     <div *ngIf="statesFormArray().controls.length; else noStates" class="tb-form-table-body">
       <div *ngFor="let stateControl of statesFormArray().controls; trackBy: trackByState; let $index = index; let $last = last">
-        <tb-time-series-chart-state-row fxFlex
+        <tb-time-series-chart-state-row class="flex-1"
                                         [formControl]="stateControl"
                                         (stateRemoved)="removeState($index)">
         </tb-time-series-chart-state-row>
@@ -42,6 +42,5 @@
   </div>
 </div>
 <ng-template #noStates>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'widgets.time-series-chart.state.no-states' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.time-series-chart.state.no-states' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
index 8d8e4a007f..0b95869c2d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
@@ -44,8 +44,8 @@
       <mat-slide-toggle class="mat-slide" formControlName="showLabel">
         {{ 'widgets.time-series-chart.threshold.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 lt-md:flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="labelPosition">
             <mat-option *ngFor="let position of timeSeriesThresholdLabelPositions" [value]="position">
               {{ timeSeriesThresholdLabelPositionTranslations.get(position) | translate }}
@@ -101,7 +101,7 @@
       <div class="tb-form-row column-xs">
         <div translate>widgets.time-series-chart.threshold.start-symbol</div>
         <div class="tb-flex row flex-end">
-          <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="startSymbol">
               <mat-option *ngFor="let shape of chartShapes" [value]="shape">
                 {{ chartShapeTranslations.get(shape) | translate }}
@@ -118,7 +118,7 @@
       <div class="tb-form-row column-xs">
         <div translate>widgets.time-series-chart.threshold.end-symbol</div>
         <div class="tb-flex row flex-end">
-          <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="endSymbol">
               <mat-option *ngFor="let shape of chartShapes" [value]="shape">
                 {{ chartShapeTranslations.get(shape) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html
index ba0325da93..eca14627de 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html
@@ -29,7 +29,7 @@
     </div>
     <div *ngIf="thresholdsFormArray().controls.length; else noThresholds" class="tb-form-table-body">
       <div *ngFor="let thresholdControl of thresholdsFormArray().controls; trackBy: trackByThreshold; let $index = index; let $last = last">
-        <tb-time-series-chart-threshold-row fxFlex
+        <tb-time-series-chart-threshold-row class="flex-1"
                                     [formControl]="thresholdControl"
                                     [hideYAxis]="hideYAxis"
                                     [yAxisIds]="yAxisIds"
@@ -46,6 +46,5 @@
   </div>
 </div>
 <ng-template #noThresholds>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'widgets.time-series-chart.threshold.no-thresholds' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.time-series-chart.threshold.no-thresholds' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html
index d018b638d0..a12e1b3a7f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html
@@ -36,17 +36,17 @@
       <div cdkDrag [cdkDragDisabled]="!dragEnabled"
            class="tb-draggable-form-table-row"
            *ngFor="let axisControl of axesFormArray().controls; trackBy: trackByAxis; let $index = index;">
-        <tb-time-series-chart-y-axis-row fxFlex
+        <tb-time-series-chart-y-axis-row class="flex-1"
                                             [formControl]="axisControl"
                                             [advanced]="advanced"
                                             (axisRemoved)="removeAxis($index)">
         </tb-time-series-chart-y-axis-row>
         <div class="tb-form-table-row-cell-buttons">
-          <button fxHide.lt-lg
+          <button class="lt-lg:!hidden"
+                  [class.tb-hidden]="!dragEnabled"
                   mat-icon-button
                   type="button"
                   cdkDragHandle
-                  [ngClass]="{'tb-hidden': !dragEnabled}"
                   matTooltip="{{ 'action.drag' | translate }}"
                   matTooltipPosition="above">
             <mat-icon>drag_indicator</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html
index 28c79a1310..3e4eae3125 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html
@@ -16,8 +16,8 @@
 
 -->
 <div class="tb-form-panel" [class.stroked]="stroked" [formGroup]="barWidthSettingsFormGroup">
-  <div fxLayout="row" fxLayoutAlign="space-between center">
-    <div fxFlex translate>widgets.time-series-chart.no-aggregation-bar-width-strategy</div>
+  <div class="flex flex-row items-center justify-between">
+    <div class="flex-1" translate>widgets.time-series-chart.no-aggregation-bar-width-strategy</div>
     <tb-toggle-select formControlName="strategy" selectMediaBreakpoint="xs">
       <tb-toggle-option *ngFor="let strategy of timeSeriesChartNoAggregationBarWidthStrategies" [value]="strategy">
         {{ timeSeriesChartNoAggregationBarWidthStrategyTranslations.get(strategy) | translate }}
@@ -46,8 +46,8 @@
 <ng-template #barWidth let-label="label" let-formGroup="formGroup">
   <div class="tb-form-row space-between column-lt-md" [formGroup]="formGroup">
     <div translate>{{ label }}</div>
-    <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 lt-md:flex-1 flex-row items-center justify-start gap-2">
+      <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="relative">
           <mat-select-trigger>
             {{ (formGroup.get('relative').value ?
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
index 5e761c52cc..c3dbe49abf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
@@ -20,7 +20,7 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
       {{ 'widgets.status-widget.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>
@@ -33,7 +33,7 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showStatus">
       {{ 'widgets.status-widget.status' | 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="status" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
@@ -46,11 +46,11 @@
     <div class="fixed-title-width">
       {{ 'widgets.status-widget.icon' | translate }}
     </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 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
                                formControlName="icon">
       </tb-material-icon-select>
@@ -58,24 +58,24 @@
   </div>
   <div class="tb-form-row space-between" [class]="{'column-xs': layout === StatusWidgetLayout.icon, 'column-lt-md': layout !== StatusWidgetLayout.icon}">
     <div>{{ 'widgets.status-widget.color-palette' | translate }}</div>
-    <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center"
-         [fxLayoutAlign.lt-md]="layout !== StatusWidgetLayout.icon ? 'space-between center': 'start center'"
-         style="gap: 12px;">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-row flex-wrap items-center justify-start gap-3 lt-sm:justify-between"
+         [class.lt-md:justify-start]="layout === StatusWidgetLayout.icon"
+         [class.lt-md:justify-between]="layout !== StatusWidgetLayout.icon">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div tb-hint-tooltip-icon="{{'widgets.status-widget.primary-color-hint' | translate}}" translate>widgets.status-widget.primary</div>
         <tb-color-input asBoxInput
                         formControlName="primaryColor">
         </tb-color-input>
       </div>
-      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical fxHide.lt-md></mat-divider>
-      <div *ngIf="layout !== StatusWidgetLayout.icon" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical class="lt-md:!hidden"></mat-divider>
+      <div *ngIf="layout !== StatusWidgetLayout.icon" class="flex flex-row items-center justify-start gap-2">
         <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
         <tb-color-input asBoxInput
                         formControlName="secondaryColor">
         </tb-color-input>
       </div>
-      <mat-divider vertical fxHide.lt-sm [fxHide.lt-md]="layout !== StatusWidgetLayout.icon"></mat-divider>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-divider vertical class="lt-sm:!hidden" [class.lt-md:!hidden]="layout !== StatusWidgetLayout.icon"></mat-divider>
+      <div class="flex flex-row items-center justify-start gap-2">
         <div translate>widgets.status-widget.background</div>
         <tb-background-settings formControlName="background">
         </tb-background-settings>
@@ -84,24 +84,24 @@
   </div>
   <div class="tb-form-row space-between" [class]="{'column-xs': layout === StatusWidgetLayout.icon, 'column-lt-md': layout !== StatusWidgetLayout.icon}">
     <div>{{ 'widgets.status-widget.disabled-color-palette' | translate }}</div>
-    <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center"
-         [fxLayoutAlign.lt-md]="layout !== StatusWidgetLayout.icon ? 'space-between center': 'start center'"
-         style="gap: 12px;">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-row flex-wrap items-center justify-start gap-3 lt-sm:justify-between"
+         [class.lt-md:justify-start]="layout === StatusWidgetLayout.icon"
+         [class.lt-md:justify-between]="layout !== StatusWidgetLayout.icon">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div tb-hint-tooltip-icon="{{'widgets.status-widget.primary-color-hint' | translate}}" translate>widgets.status-widget.primary</div>
         <tb-color-input asBoxInput
                         formControlName="primaryColorDisabled">
         </tb-color-input>
       </div>
-      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical fxHide.lt-md></mat-divider>
-      <div *ngIf="layout !== StatusWidgetLayout.icon" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical class="lt-md:!hidden"></mat-divider>
+      <div *ngIf="layout !== StatusWidgetLayout.icon" class="flex flex-row items-center justify-start gap-2">
         <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
         <tb-color-input asBoxInput
                         formControlName="secondaryColorDisabled">
         </tb-color-input>
       </div>
-      <mat-divider vertical fxHide.lt-sm [fxHide.lt-md]="layout !== StatusWidgetLayout.icon"></mat-divider>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-divider vertical class="lt-sm:!hidden" [class.lt-md:!hidden]="layout !== StatusWidgetLayout.icon"></mat-divider>
+      <div class="flex flex-row items-center justify-start gap-2">
         <div translate>widgets.status-widget.background</div>
         <tb-background-settings formControlName="backgroundDisabled">
         </tb-background-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html
index eb056bd056..c8a0c5cb2a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html
@@ -21,7 +21,7 @@
     <ng-container *ngFor="let behaviorGroup of behaviorGroups">
       <div *ngIf="behaviorGroup.title" class="tb-form-panel stroked">
         <mat-expansion-panel class="tb-settings" expanded>
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
             <mat-panel-title>
               <div class="tb-form-panel-title">{{ behaviorGroup.title | customTranslate }}</div>
             </mat-panel-title>
@@ -36,7 +36,7 @@
       </ng-container>
     </ng-container>
   </div>
-  <div [fxShow]="propertyRows?.length || appearanceProperties.children.length" class="tb-form-panel" formGroupName="properties">
+  <div [class.!hidden]="!propertyRows?.length && !appearanceProperties.children.length" class="tb-form-panel" formGroupName="properties">
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div #appearanceProperties><ng-content select=".tb-scada-symbol-appearance-properties"></ng-content></div>
     <div *ngFor="let propertyRow of propertyRows" class="tb-form-row space-between flex-wrap overflow-auto" [class]="propertyRow.rowClass">
@@ -49,7 +49,7 @@
           <div *ngIf="property.subLabel" class="tb-small-label">{{ property.subLabel | customTranslate }}</div>
           <mat-form-field  *ngIf="property.type === ScadaSymbolPropertyType.text" [class]="property.fieldClass" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="{{ property.id }}" [required]="property.required" placeholder="{{ 'widget-config.set' | translate }}">
-            <div fxHide.lt-md matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
+            <div class="lt-md:!hidden" matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
           </mat-form-field>
           <tb-color-input *ngIf="property.type === ScadaSymbolPropertyType.color"
                           [required]="property.required"
@@ -67,7 +67,7 @@
             <input matInput formControlName="{{ property.id }}" [required]="property.required"
                    [min]="property.min" [max]="property.max" [step]="property.step"
                    type="number" placeholder="{{ 'widget-config.set' | translate }}">
-            <div fxHide.lt-md matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
+            <div class="lt-md:!hidden" matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
           </mat-form-field>
           <tb-font-settings *ngIf="property.type === ScadaSymbolPropertyType.font"
                             [class]="property.fieldClass"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
index 977a493c5f..668613012e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field fxFlex [appearance]="inlineField ? 'outline': 'fill'"
+<mat-form-field class="flex-1" [appearance]="inlineField ? 'outline': 'fill'"
                 [subscriptSizing]="inlineField ? 'dynamic' : 'fixed'"
                 [class]="{'tb-inline-field': inlineField, 'flex': inlineField,
                           'tb-suffix-absolute': (inlineField && !deviceKeyFormGroup.get('key').value)}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
index 43e70f8810..c8178c1c68 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
@@ -15,61 +15,61 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="knobControlWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="knobControlWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.knob-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.value-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.initial-value</mat-label>
       <input matInput type="number" formControlName="initialValue">
     </mat-form-field>
-    <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.rpc.min-value</mat-label>
         <input required matInput type="number" formControlName="minValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.max-value</mat-label>
         <input required matInput type="number" formControlName="maxValue">
       </mat-form-field>
     </section>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.get-value-method</mat-label>
       <input required matInput formControlName="getValueMethod">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.set-value-method</mat-label>
       <input required matInput formControlName="setValueMethod">
     </mat-form-field>
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="knobControlWidgetSettingsForm.get('requestPersistent').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="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | 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>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
index fa66dd6be1..1810813d89 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
@@ -15,14 +15,14 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="ledIndicatorWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="ledIndicatorWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.led-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <tb-color-input fxFlex
+    <tb-color-input class="flex-1"
                     formControlName="ledColor"
                     icon="format_color_fill"
                     label="{{ 'widgets.rpc.led-color' | translate }}" openOnInput colorClearButton>
@@ -38,7 +38,7 @@
       <mat-slide-toggle formControlName="performCheckStatus" class="slide-block">
         {{ 'widgets.rpc.perform-rpc-status-check' | translate }}
       </mat-slide-toggle>
-      <mat-form-field [fxShow]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" fxFlex class="mat-block">
+      <mat-form-field [class.!hidden]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="mat-block flex-1">
         <mat-label translate>widgets.rpc.retrieve-led-status-value-method</mat-label>
         <mat-select formControlName="retrieveValueMethod">
           <mat-option [value]="'attribute'">
@@ -49,8 +49,8 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <tb-device-key-autocomplete fxFlex
-                                  [fxShow]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value"
+      <tb-device-key-autocomplete class="flex-1"
+                                  [class.!hidden]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value"
                                   [aliasController]="aliasController"
                                   [targetDevice]="targetDevice"
                                   [keyType]="ledIndicatorWidgetSettingsForm.get('retrieveValueMethod').value === 'attribute' ? dataKeyType.attribute : dataKeyType.timeseries"
@@ -59,7 +59,7 @@
                                   required
                                   formControlName="valueAttribute">
       </tb-device-key-autocomplete>
-      <mat-form-field [fxShow]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" fxFlex class="mat-block">
+      <mat-form-field [class.!hidden]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="flex-1 mat-block">
         <mat-label translate>widgets.rpc.check-status-method</mat-label>
         <input required matInput formControlName="checkStatusMethod">
       </mat-form-field>
@@ -71,28 +71,28 @@
       </tb-js-func>
     </fieldset>
   </fieldset>
-  <fieldset [fxShow]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="fields-group">
+  <fieldset [class.!hidden]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="ledIndicatorWidgetSettingsForm.get('requestPersistent').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="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | 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>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
index 6bb7428b7f..229cb21adc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
@@ -15,16 +15,16 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="persistentTableWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="persistentTableWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.persistent-table.general-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-      <section fxLayout="column" fxFlex>
+    <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <section class="flex flex-1 flex-col">
         <mat-checkbox formControlName="enableFilter">
           {{ 'widgets.persistent-table.enable-filter' | translate }}
         </mat-checkbox>
       </section>
-      <section fxLayout="column" fxFlex>
+      <section class="flex flex-1 flex-col">
         <mat-checkbox formControlName="enableStickyHeader">
           {{ 'widgets.persistent-table.enable-sticky-header' | translate }}
         </mat-checkbox>
@@ -33,8 +33,8 @@
         </mat-checkbox>
       </section>
     </section>
-    <section fxLayout="column" fxLayoutGap.gt-xs="8px">
-      <mat-slide-toggle fxFlex formControlName="displayDetails">
+    <section class="flex flex-col gt-xs:gap-2">
+      <mat-slide-toggle class="flex-1" formControlName="displayDetails">
         {{ 'widgets.persistent-table.display-request-details' | translate }}
       </mat-slide-toggle>
       <mat-slide-toggle formControlName="allowSendRequest">
@@ -43,16 +43,16 @@
       <mat-slide-toggle formControlName="allowDelete">
         {{ 'widgets.persistent-table.allow-delete-request' | translate }}
       </mat-slide-toggle>
-      <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-        <mat-slide-toggle fxFlex formControlName="displayPagination">
+      <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
+        <mat-slide-toggle class="flex-1" formControlName="displayPagination">
           {{ 'widgets.table.display-pagination' | translate }}
         </mat-slide-toggle>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.table.default-page-size</mat-label>
           <input matInput type="number" min="1" step="1" formControlName="defaultPageSize">
         </mat-form-field>
       </section>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.table.default-sort-order</mat-label>
         <input matInput formControlName="defaultSortOrder">
       </mat-form-field>
@@ -60,7 +60,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.persistent-table.columns-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.persistent-table.display-columns</mat-label>
       <mat-chip-grid #columnsChipList class="tb-drop-list"
                      required
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html
index bf5d120732..461020f887 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="roundSwitchWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="roundSwitchWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.switch-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
index c424886e8f..ed55cd5344 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="rpcButtonStyleFormGroup" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="rpcButtonStyleFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.button-style</legend>
     <mat-slide-toggle formControlName="isRaised" class="slide-block">
@@ -24,13 +24,13 @@
     <mat-slide-toggle formControlName="isPrimary" class="slide-block">
       {{ 'widgets.rpc.button-primary' | translate }}
     </mat-slide-toggle>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <tb-color-input fxFlex
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <tb-color-input class="flex-1"
                       formControlName="textColor"
                       icon="format_color_fill"
                       label="{{ 'widgets.rpc.button-text-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
-      <tb-color-input fxFlex
+      <tb-color-input class="flex-1"
                       formControlName="bgColor"
                       icon="format_color_fill"
                       label="{{ 'widgets.rpc.button-background-color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html
index 4c7fc9b3d7..352f7fc02c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="rpcShellWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="rpcShellWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html
index df613761d2..a2391ad2d2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html
@@ -15,29 +15,29 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="rpcTerminalWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="rpcTerminalWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="rpcTerminalWidgetSettingsForm.get('requestPersistent').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="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | 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>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
index 294ff3ae38..f1e77d991e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
@@ -15,14 +15,14 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="sendRpcWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="sendRpcWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.widget-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.button-label</mat-label>
       <input matInput formControlName="buttonText">
     </mat-form-field>
@@ -32,7 +32,7 @@
     <mat-checkbox formControlName="oneWayElseTwoWay">
       {{ 'widgets.rpc.is-one-way-command' | translate }}
     </mat-checkbox>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.rpc-method</mat-label>
       <input matInput formControlName="methodName">
     </mat-form-field>
@@ -42,7 +42,7 @@
       validateOnChange
       formControlName="methodParams">
     </tb-json-content>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
@@ -52,19 +52,19 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="sendRpcWidgetSettingsForm.get('requestPersistent').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="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | 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>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
index d5df22f3a6..3f87cd6734 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.single-switch.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.rpc-state.turn-on-hint' | translate}}" translate>widgets.rpc-state.turn-on</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.turn-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.rpc-state.turn-off-hint' | translate}}" translate>widgets.rpc-state.turn-off</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.turn-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 }}"
@@ -85,7 +85,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
         {{ 'widgets.single-switch.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>
@@ -102,11 +102,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.single-switch.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]="singleSwitchWidgetSettingsForm.get('iconColor').value?.color"
@@ -134,22 +134,22 @@
     <div class="tb-form-panel-title" translate>widgets.single-switch.switch</div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.single-switch.switch-color' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3 lt-sm:justify-between">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.on</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorOn">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.off</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorOff">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorDisabled">
@@ -159,22 +159,22 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.single-switch.tumbler-color' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3 lt-sm:justify-between">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.on</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorOn">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.off</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorOff">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorDisabled">
@@ -186,7 +186,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOnLabel">
         {{ 'widgets.single-switch.on-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="onLabel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -203,7 +203,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOffLabel">
         {{ 'widgets.single-switch.off-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="offLabel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
index 1bf741eba7..abaaf4c7a4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="slideToggleWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="slideToggleWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.slide-toggle-label</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <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.rpc.label-position</mat-label>
         <mat-select formControlName="labelPosition">
           <mat-option [value]="'before'">
@@ -34,7 +34,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.slider-color</mat-label>
         <mat-select formControlName="sliderColor">
           <mat-option [value]="'primary'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
index 1c7d3c8402..a8dd71168e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.slider.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}" translate>widgets.slider.initial-value</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.slider.initial-value' | translate }}"
                                     [valueType]="valueType.DOUBLE"
                                     [aliasController]="aliasController"
@@ -30,7 +30,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.slider.on-value-change' | translate }}"
                                     [valueType]="valueType.DOUBLE"
                                     [aliasController]="aliasController"
@@ -40,7 +40,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 }}"
@@ -88,11 +88,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.slider.value' | 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">
         <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="valueDecimals" 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="valueFont"
                           [previewText]="valuePreviewFn">
@@ -105,7 +105,7 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.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.slider.min</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
@@ -120,7 +120,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTicks">
         {{ 'widgets.slider.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>
@@ -134,7 +134,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTickMarks">
         {{ 'widgets.slider.tick-marks' | translate }}
       </mat-slide-toggle>
-      <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="tickMarksCount" type="number" min="2"
                  step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -146,15 +146,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.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.slider.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColor">
           </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.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColor">
@@ -164,15 +164,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.rpc-state.disabled-state' | 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.slider.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.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorDisabled">
@@ -185,11 +185,11 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.left-icon' | translate }}
       </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 appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="leftIconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="leftIconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  [color]="sliderWidgetSettingsForm.get('leftIconColor').value"
                                  formControlName="leftIcon">
@@ -204,11 +204,11 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.right-icon' | translate }}
       </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 appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="rightIconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="rightIconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  [color]="sliderWidgetSettingsForm.get('rightIconColor').value"
                                  formControlName="rightIcon">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html
index f50ec5c903..70bbe2a3d7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="switchControlWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="switchControlWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.switch-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
index 12a722c77a..23a4a62d93 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="switchRpcSettingsFormGroup" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="switchRpcSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.value-settings</legend>
     <mat-checkbox formControlName="initialValue">
@@ -23,7 +23,7 @@
     </mat-checkbox>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.rpc.retrieve-value-settings</legend>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.retrieve-value-method</mat-label>
         <mat-select formControlName="retrieveValueMethod">
           <mat-option [value]="'none'">
@@ -40,20 +40,20 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <tb-device-key-autocomplete fxFlex
-        [fxShow]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'attribute' ||
-                  switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'timeseries'"
+      <tb-device-key-autocomplete class="flex-1"
+        [class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'attribute' &&
+                         switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'timeseries'"
         [aliasController]="aliasController"
         [targetDevice]="targetDevice"
         [keyType]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'attribute' ? dataKeyType.attribute : dataKeyType.timeseries"
         required
         formControlName="valueKey">
       </tb-device-key-autocomplete>
-      <mat-form-field [fxShow]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'rpc'" fxFlex class="mat-block">
+      <mat-form-field [class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'rpc'" class="mat-block flex-1">
         <mat-label translate>widgets.rpc.get-value-method</mat-label>
         <input required matInput formControlName="getValueMethod">
       </mat-form-field>
-      <tb-js-func [fxHide]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'none'"
+      <tb-js-func [class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'none'"
         formControlName="parseValueFunction"
         [globalVariables]="functionScopeVariables"
         [functionArgs]="['data']"
@@ -63,7 +63,7 @@
     </fieldset>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.rpc.update-value-settings</legend>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.set-value-method</mat-label>
         <input required matInput formControlName="setValueMethod">
       </mat-form-field>
@@ -78,26 +78,26 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="switchRpcSettingsFormGroup.get('requestPersistent').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="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | 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>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
index 4ff423c352..401bccc469 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateDeviceAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateDeviceAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.widget-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.button-label</mat-label>
       <input matInput formControlName="buttonText">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.device-attribute-scope</mat-label>
       <mat-select formControlName="entityAttributeType">
         <mat-option [value]="'SERVER_SCOPE'">