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

---
 .../battery-level-basic-config.component.html |   8 +-
 ...uid-level-card-basic-config.component.html |  21 ++--
 ...ignal-strength-basic-config.component.html |  23 ++--
 .../status-widget-basic-config.component.html |   6 +-
 .../single-switch-basic-config.component.html |  42 +++----
 .../rpc/slider-basic-config.component.html    |  42 +++----
 .../scada-symbol-basic-config.component.html  |   6 +-
 ...peed-direction-basic-config.component.html |  22 ++--
 .../embed-dashboard-dialog.component.html     |   8 +-
 .../alarm/alarms-table-widget.component.html  | 110 +++++++++---------
 .../lib/display-columns-panel.component.html  |   2 +-
 .../lib/edges-overview-widget.component.html  |   8 +-
 .../widget/lib/flot-widget.component.html     |   8 +-
 .../widget/lib/flot-widget.component.ts       |   8 +-
 .../lib/json-input-widget.component.html      |  11 +-
 .../lib/multiple-input-widget.component.html  |   6 +-
 .../lib/photo-camera-input.component.html     |  28 ++---
 .../widget/lib/qrcode-widget.component.html   |   4 +-
 .../timeseries-table-widget.component.html    |  96 ++++++++-------
 19 files changed, 233 insertions(+), 226 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
index f5a5693a63..ce0f79eda7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
@@ -52,7 +52,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -71,11 +71,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.battery-level.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" 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]="batteryLevelWidgetConfigForm.get('iconColor').value"
@@ -91,7 +91,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.battery-level.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <mat-chip-listbox formControlName="autoScaleValueSize">
           <mat-chip-option [value]="true">{{ 'widgets.battery-level.auto-scale' | translate }}</mat-chip-option>
         </mat-chip-listbox>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index a3bfce9d5d..63da3f10fe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -53,7 +53,7 @@
         <mat-form-field appearance="outline" class="flex number" 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]="levelCardWidgetConfigForm.get('iconColor').value"
@@ -63,7 +63,7 @@
         </tb-color-input>
       </div>
     </div>
-    <div fxFlex fxLayout="column" class="tb-form-row space-between">
+    <div class="tb-form-row space-between flex-1 flex-col">
       <div class="tb-flex row space-between align-center no-gap fill-width">
         <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
         <tb-toggle-select formControlName="tankSelectionType">
@@ -73,7 +73,7 @@
         </tb-toggle-select>
       </div>
       <tb-image-cards-select #shapesImageCardsSelect
-                             [fxShow]="levelCardWidgetConfigForm.get('tankSelectionType').value === DataSourceType.static"
+                             [class.!hidden]="levelCardWidgetConfigForm.get('tankSelectionType').value !== DataSourceType.static"
                              rowHeight="1:1"
                              [cols]="{columns: 5,
                                     breakpoints: {
@@ -154,7 +154,7 @@
         </ng-template>
       </div>
     </div>
-    <div class="tb-form-row column-xs" [fxShow]="volumeInput">
+    <div class="tb-form-row column-xs" [class.!hidden]="!volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
       <div class="tb-flex row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
@@ -186,7 +186,7 @@
         </ng-template>
       </div>
     </div>
-    <div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
+    <div class="tb-form-row space-between column-xs" [class.!hidden]="!volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
       <div class="tb-flex row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
@@ -230,7 +230,7 @@
         <mat-form-field style="max-width: 40%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" 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">
@@ -254,10 +254,9 @@
     <mat-expansion-panel class="tb-settings"
       [expanded]="levelCardWidgetConfigForm.get('showTooltip').value"
       [disabled]="!levelCardWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -275,7 +274,7 @@
             <mat-form-field style="width: 40%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
               <input matInput formControlName="tooltipLevelDecimals" 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="tooltipLevelFont"
                               [previewText]="tooltipValuePreviewFn">
@@ -289,7 +288,7 @@
             {{ 'widgets.value-card.date' | translate }}
           </mat-slide-toggle>
           <div class="tb-flex row flex-start align-center">
-            <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
+            <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="datePreviewFn">
             </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
index 0e8475aacf..edfb39e4ed 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
@@ -46,7 +46,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -65,12 +65,12 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.signal-strength.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" 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]="signalStrengthWidgetConfigForm.get('iconColor').value"
@@ -86,8 +86,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.signal-strength.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
@@ -113,10 +113,9 @@
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="signalStrengthWidgetConfigForm.get('showTooltip').value"
                          [disabled]="!signalStrengthWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -126,12 +125,12 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipValue">
             {{ 'tooltip.value' | translate }}
           </mat-slide-toggle>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex-1 flex flex-row justify-start items-center gap-2">
             <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
             <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
               <input matInput formControlName="decimals" type="number" min="0" max="15" step="1"
                      placeholder="{{ 'widget-config.set' | translate }}">
-              <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+              <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
             </mat-form-field>
             <tb-font-settings formControlName="tooltipValueFont"
                               [previewText]="tooltipValuePreviewFn">
@@ -146,8 +145,8 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
+          <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+            <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="tooltipDatePreviewFn">
             </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
index e43dd1665a..d901901126 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
@@ -21,7 +21,7 @@
     <div class="tb-form-panel-title" translate>widgets.status-widget.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 }}"
@@ -34,7 +34,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 }}"
@@ -61,7 +61,7 @@
     </tb-image-cards-select>
   </div>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row justify-between items-center">
       <div class="tb-form-panel-title" translate>widget-config.card-style</div>
       <tb-toggle-select [(ngModel)]="cardStyleMode"
                         [ngModelOptions]="{ standalone: true }">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
index 9fa2d1b1a5..59cdfa56eb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
@@ -21,7 +21,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 }}"
@@ -34,7 +34,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"
@@ -43,7 +43,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"
@@ -52,7 +52,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 }}"
@@ -86,7 +86,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-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -103,11 +103,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-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" 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]="singleSwitchWidgetConfigForm.get('iconColor').value?.color"
@@ -121,22 +121,22 @@
     </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 justify-start items-center gap-3 lt-sm:justify-between lt-sm:items-center">
+        <div class="flex flex-row justify-start items-center 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 justify-start items-center 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 justify-start items-center gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorDisabled">
@@ -146,22 +146,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 justify-start items-center gap-3 lt-sm:justify-between lt-sm:items-center">
+        <div class="flex flex-row justify-start items-center 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 justify-start items-center 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 justify-start items-center gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorDisabled">
@@ -173,7 +173,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-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="onLabel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -190,7 +190,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-1 flex flex-row justify-start items-center 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/config/basic/rpc/slider-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
index 5dd62493ec..400ae2dc24 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
@@ -21,7 +21,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"
@@ -31,7 +31,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"
@@ -41,7 +41,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 }}"
@@ -75,7 +75,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -94,11 +94,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.slider.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" 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]="sliderWidgetConfigForm.get('iconColor').value"
@@ -114,11 +114,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-1 flex flex-row justify-start items-center gap-2">
         <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
         <mat-form-field appearance="outline" class="flex number" 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">
@@ -131,7 +131,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 justify-start items-center 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 }}">
@@ -146,7 +146,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 justify-start items-center gap-2">
         <tb-font-settings formControlName="ticksFont"
                           previewText="100">
         </tb-font-settings>
@@ -160,7 +160,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 justify-start items-center 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 }}">
@@ -172,15 +172,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 justify-start items-center gap-3">
+        <div class="flex flex-row justify-start items-center 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 justify-start items-center gap-2">
           <div translate>widgets.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColor">
@@ -190,15 +190,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 justify-start items-center gap-3">
+        <div class="flex flex-row justify-start items-center 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 justify-start items-center gap-2">
           <div translate>widgets.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorDisabled">
@@ -211,11 +211,11 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.left-icon' | translate }}
       </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" 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]="sliderWidgetConfigForm.get('leftIconColor').value"
                                  formControlName="leftIcon">
@@ -230,11 +230,11 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.right-icon' | translate }}
       </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" 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]="sliderWidgetConfigForm.get('rightIconColor').value"
                                  formControlName="rightIcon">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
index e9c6f0967e..56a2e0b588 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
@@ -34,7 +34,7 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
           {{ 'widget-config.title' | translate }}
         </mat-slide-toggle>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex-1 flex flex-row justify-start items-center gap-2">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
@@ -53,11 +53,11 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
           {{ 'widget-config.card-icon' | translate }}
         </mat-slide-toggle>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex-1 flex flex-row justify-start items-center gap-2">
           <mat-form-field appearance="outline" class="flex number" 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]="scadaSymbolWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
index 0dd9a2ebd9..d9f71aad72 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
@@ -30,8 +30,8 @@
     <div class="tb-form-panel-title" translate>widgets.wind-speed-direction.values</div>
     <div class="tb-form-row">
       <div class="fixed-title-width tb-required" translate>widgets.wind-speed-direction.wind-direction</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-data-key-row fxFlex
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <tb-data-key-row class="flex-1"
                          formControlName="windDirectionKey"
                          required
                          [datasourceType]="datasource?.type"
@@ -55,8 +55,8 @@
     </div>
     <div class="tb-form-row column-xs">
       <div class="fixed-title-width" translate>widgets.wind-speed-direction.center-value</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-data-key-row fxFlex
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <tb-data-key-row class="flex-1"
                          formControlName="centerValueKey"
                          [datasourceType]="datasource?.type"
                          [deviceId]="datasource?.deviceId"
@@ -94,7 +94,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -113,11 +113,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.wind-speed-direction.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" 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]="windSpeedDirectionWidgetConfigForm.get('iconColor').value"
@@ -153,8 +153,8 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.wind-speed-direction.major-ticks' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-font-settings [fxShow]="majorTicksFontEnabled"
+      <div class="flex flex-row justify-start items-center gap-2">
+        <tb-font-settings [class.!hidden]="!majorTicksFontEnabled"
                           formControlName="majorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetConfigForm.get('majorTicksColor').value }"
                           [autoScale]="true"
@@ -167,8 +167,8 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.wind-speed-direction.minor-ticks' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-font-settings [fxShow]="minorTicksFontEnabled"
+      <div class="flex flex-row justify-start items-center gap-2">
+        <tb-font-settings [class.!hidden]="!minorTicksFontEnabled"
                           formControlName="minorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetConfigForm.get('minorTicksColor').value }"
                           [autoScale]="true"
diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
index 4e1a2ba038..934052caa3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div class="dashboard-state-dialog" [ngStyle]="dialogStyle" fxLayout="column">
+<div class="dashboard-state-dialog flex flex-col" [style]="dialogStyle">
   <mat-toolbar color="primary">
     <h2>{{title}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -26,11 +26,11 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div class="dashboard-state-dialog-content" mat-dialog-content fxFlex fxLayout="column" style="padding: 8px;">
+  <div class="dashboard-state-dialog-content flex-1 flex flex-col" mat-dialog-content style="padding: 8px;">
     <tb-dashboard-page [embedded]="true" [syncStateWithQueryParam]="false" [hideToolbar]="hideToolbar"
                        [currentState]="state" [dashboard]="dashboard" [parentDashboard]="parentDashboard" style="width: 100%; height: 100%;"></tb-dashboard-page>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
index b8fc11aed5..01d29edc96 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
@@ -16,15 +16,15 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && alarmsDatasource.selection.isEmpty()">
+  <div class="tb-absolute-fill flex-1 flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !alarmsDatasource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -37,13 +37,13 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="!alarmsDatasource.selection.isEmpty()">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="alarmsDatasource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
                 <span>
                   {{ translate.get('alarm.selected-alarms',
                   {count: alarmsDatasource.selection.selected.length}) | async }}
                 </span>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button *ngIf="allowAcknowledgment"
                 mat-icon-button [disabled]="isLoading$ | async"
                 matTooltip="{{ 'alarm.acknowledge' | translate }}"
@@ -60,7 +60,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByAlarmId"
                  matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
@@ -78,16 +78,16 @@
           </mat-cell>
         </ng-container>
         <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; let $index = index; trackBy: trackByColumnDef;">
-          <mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="isSorting(column)">
+          <mat-header-cell [style]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="isSorting(column)">
             {{ column.title }}
           </mat-header-cell>
           <mat-cell *matCellDef="let alarm; let row = index"
-                    [ngStyle]="cellStyle(alarm, column, row)"
+                    [style]="cellStyle(alarm, column, row)"
                     (click)="onCellClick($event, alarm, column, $index)"
                     [class.tb-pointer]="columnHasCellClick($index)">
             <span [innerHTML]="cellContent(alarm, column, row)"></span>
             <ng-container *ngIf="column.entityKey.key === 'assignee'">
-              <span class="assignee-cell" fxLayout="row" fxLayoutAlign="start center">
+              <span class="assignee-cell flex flex-row justify-start items-center">
                 <span *ngIf="alarm.assigneeId && checkAssigneeHasName(alarm.assignee); else unassigned"
                       class="assigned-container">
                   <span class="user-avatar" [style.backgroundColor]="getAvatarBgColor(alarm.assignee)">
@@ -120,60 +120,64 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
-          <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction  * 48) + 'px',
-                                                                maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
-                                                                width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }">
+          <mat-header-cell *matHeaderCellDef>
+            <ng-container *ngIf="alarmsDatasource.countCellButtonAction">
+              <div class="gt-md:!hidden" style="min-width: 48px;">
+              </div>
+              <div class="lt-lg:!hidden"
+                   [style.min-width]="(alarmsDatasource.countCellButtonAction * 48) + 'px'">
+              </div>
+            </ng-container>
           </mat-header-cell>
-          <mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)" [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
-                                                               maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
-                                                               width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }">
-            <div [fxHide]="showCellActionsMenu" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-              <ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
-                <button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
-                        *ngIf="actionDescriptor.icon"
-                        matTooltip="{{ actionDescriptor.displayName }}"
-                        matTooltipPosition="above"
-                        (click)="onActionButtonClick($event, alarm, actionDescriptor)">
-                  <mat-icon>{{actionDescriptor.icon}}</mat-icon>
-                </button>
-              </ng-container>
-            </div>
-            <div fxHide [fxShow.lt-lg]="showCellActionsMenu" *ngIf="alarm.hasActions">
-              <button mat-icon-button
-                      (click)="$event.stopPropagation(); ctx.detectChanges();"
-                      [matMenuTriggerFor]="cellActionsMenu">
-                <mat-icon class="material-icons">more_vert</mat-icon>
-              </button>
-              <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+          <mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)">
+            <ng-container *ngIf="alarmsDatasource.countCellButtonAction">
+              <div [class.lt-lg:!hidden]="showCellActionsMenu && alarmsDatasource.countCellButtonAction !== 1" class="flex flex-row justify-end items-stretch"
+                   [style.min-width]="(alarmsDatasource.countCellButtonAction * 48) + 'px'">
                 <ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                  <button mat-menu-item *ngIf="actionDescriptor.icon"
-                          [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
+                  <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
+                  <button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
+                          *ngIf="actionDescriptor.icon"
+                          matTooltip="{{ actionDescriptor.displayName }}"
+                          matTooltipPosition="above"
                           (click)="onActionButtonClick($event, alarm, actionDescriptor)">
-                    <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                    <span>{{ actionDescriptor.displayName }}</span>
+                    <mat-icon>{{actionDescriptor.icon}}</mat-icon>
                   </button>
                 </ng-container>
-              </mat-menu>
-            </div>
+              </div>
+              <div [class.!hidden]="!showCellActionsMenu || alarmsDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="alarm.hasActions">
+                <button mat-icon-button
+                        (click)="$event.stopPropagation(); ctx.detectChanges();"
+                        [matMenuTriggerFor]="cellActionsMenu">
+                  <mat-icon class="material-icons">more_vert</mat-icon>
+                </button>
+                <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                  <ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
+                    <button mat-menu-item *ngIf="actionDescriptor.icon"
+                            [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
+                            (click)="onActionButtonClick($event, alarm, actionDescriptor)">
+                      <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                      <span>{{ actionDescriptor.displayName }}</span>
+                    </button>
+                  </ng-container>
+                </mat-menu>
+              </div>
+            </ng-container>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': enableSelection}" *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
-        <mat-row [ngClass]="{'mat-row-select': enableSelection,
-                             'mat-selected': alarmsDatasource.isSelected(alarm),
-                             'tb-current-entity': alarmsDatasource.isCurrentAlarm(alarm),
-                             'invisible': alarmsDatasource.dataLoading,
-                             'tb-pointer': hasRowAction}"
+        <mat-header-row [class.mat-row-select]="enableSelection" *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
+        <mat-row [class.mat-row-select]="enableSelection"
+                 [class.mat-selected]="alarmsDatasource.isSelected(alarm)"
+                 [class.tb-current-entity]="alarmsDatasource.isCurrentAlarm(alarm)"
+                 [class.invisible]="alarmsDatasource.dataLoading"
+                 [class.tb-pointer]="hasRowAction"
                  *matRowDef="let alarm; columns: displayedColumns; let row = index"
-                 [ngStyle]="rowStyle(alarm, row)"
+                 [style]="rowStyle(alarm, row)"
                  (click)="onRowClick($event, alarm)"></mat-row>
       </table>
-      <span [fxShow]="(alarmsDatasource.isEmpty() | async) && !alarmsDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ noDataDisplayMessageText }}</span>
-      <span [fxShow]="alarmsDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ 'common.loading' | translate }}</span>
+      <span [class.!hidden]="(alarmsDatasource.isEmpty() | async) === false || alarmsDatasource.dataLoading"
+            class="no-data-found flex justify-center items-center">{{ noDataDisplayMessageText }}</span>
+      <span [class.!hidden]="!alarmsDatasource.dataLoading"
+            class="no-data-found flex justify-center items-center" >{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider *ngIf="displayPagination"></mat-divider>
     <mat-paginator *ngIf="displayPagination"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
index c0902af28e..8096a4d864 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
+<div class="mat-content mat-padding flex flex-col">
   <label class="tb-title" translate>entity.columns-to-display</label>
   <mat-checkbox [(ngModel)]="column.display" *ngFor="let column of (columns | selectableColumns)"
                 (ngModelChange)="update()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
index abbf62f973..cc3cdcc01d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="tb-edges-overview tb-absolute-fill" tb-toast toastTarget="{{ toastTargetId }}">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <span class="mat-subheader" *ngIf="customerTitle" fxLayout="row">{{ customerTitle }}</span>
-    <span class="mat-subheader" *ngIf="!edgeIsDatasource" fxLayout="row" translate>edge.widget-datasource-error</span>
-    <div fxFlex class="tb-entities-nav-tree-panel">
+  <div class="tb-absolute-fill flex-1 flex flex-col">
+    <span class="mat-subheader flex flex-row" *ngIf="customerTitle">{{ customerTitle }}</span>
+    <span class="mat-subheader flex flex-row" *ngIf="!edgeIsDatasource" translate>edge.widget-datasource-error</span>
+    <div class="tb-entities-nav-tree-panel flex-1">
       <tb-nav-tree
         [loadNodes]="loadNodes"
       ></tb-nav-tree>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html
index 82ca0430cb..ebb7c6b5e1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html
@@ -15,16 +15,16 @@
     limitations under the License.
 
 -->
-<div class="tb-absolute-fill" [fxLayout]="legendContainerLayoutType">
+<div class="tb-absolute-fill flex" [class]="legendContainerLayoutType">
   <tb-legend *ngIf="displayLegend && isLegendFirst"
-             [ngStyle]="legendStyle"
+             [style]="legendStyle"
              [legendConfig]="legendConfig"
              [legendData]="legendData"
              (legendKeyHiddenChange)="onLegendKeyHiddenChange($event)">
   </tb-legend>
-  <div fxFlex #flotElement></div>
+  <div class="flex-1" #flotElement></div>
   <tb-legend *ngIf="displayLegend && !isLegendFirst"
-             [ngStyle]="legendStyle"
+             [style]="legendStyle"
              [legendConfig]="legendConfig"
              [legendData]="legendData"
              (legendKeyHiddenChange)="onLegendKeyHiddenChange($event)">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts
index 389deee749..ec40f4b069 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts
@@ -46,7 +46,7 @@ export class FlotWidgetComponent implements OnInit {
   legendConfig: LegendConfig;
   legendData: LegendData;
   isLegendFirst: boolean;
-  legendContainerLayoutType: string;
+  legendContainerLayoutType: 'flex-row' | 'flex-col';
   legendStyle: {[klass: string]: any};
 
   public settings: TbFlotSettings;
@@ -70,7 +70,7 @@ export class FlotWidgetComponent implements OnInit {
     this.displayLegend = isDefinedAndNotNull(this.settings.showLegend) ? this.settings.showLegend
       : false;
 
-    this.legendContainerLayoutType = 'column';
+    this.legendContainerLayoutType = 'flex-col';
 
     if (this.displayLegend) {
       this.legendConfig = this.settings.legendConfig || defaultLegendConfig(widgetType.timeseries);
@@ -84,10 +84,10 @@ export class FlotWidgetComponent implements OnInit {
       }
       if (this.legendConfig.position === LegendPosition.top ||
         this.legendConfig.position === LegendPosition.bottom) {
-        this.legendContainerLayoutType = 'column';
+        this.legendContainerLayoutType = 'flex-col';
         this.isLegendFirst = this.legendConfig.position === LegendPosition.top;
       } else {
-        this.legendContainerLayoutType = 'row';
+        this.legendContainerLayoutType = 'flex-row';
         this.isLegendFirst = this.legendConfig.position === LegendPosition.left;
       }
       switch (this.legendConfig.position) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
index b24ad37ede..1b354c09fd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
@@ -17,12 +17,11 @@
 -->
 <div class="tb-json-input" tb-toast toastTarget="{{ toastTargetId }}">
   <form *ngIf="attributeUpdateFormGroup"
-        fxLayout="column"
-        class="tb-json-input__form"
+        class="tb-json-input__form flex flex-col"
         [formGroup]="attributeUpdateFormGroup"
         (ngSubmit)="save()">
-      <div fxLayout="column" fxLayoutGap="10px" fxFlex *ngIf="datasourceDetected && !errorMessage; else errorContainer">
-        <fieldset fxFlex>
+      <div class="flex-1 flex flex-col gap-2.5" *ngIf="datasourceDetected && !errorMessage; else errorContainer">
+        <fieldset class="flex-1">
           <tb-json-object-edit
             [editorStyle]="{minHeight: '100px'}"
             fillHeight="true"
@@ -33,7 +32,7 @@
             (focusout)="isFocused = false;"
           ></tb-json-object-edit>
         </fieldset>
-        <div class="tb-json-input__actions" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="20px">
+        <div class="tb-json-input__actions flex flex-row justify-end items-center gap-5">
           <button mat-button color="primary"
                   type="button"
                   [disabled]="!attributeUpdateFormGroup.dirty"
@@ -51,7 +50,7 @@
       </div>
 
     <ng-template #errorContainer>
-      <div class="tb-json-input__error" fxLayout="column" fxLayoutAlign="center center" fxFlex>
+      <div class="tb-json-input__error flex-1 flex flex-col justify-center items-center">
         {{ errorMessage | translate }}
       </div>
     </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
index 7f10c4d211..51d4ec22b1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
@@ -20,7 +20,7 @@
       tb-toast toastTarget="{{ toastTargetId }}"
       (ngSubmit)="saveForm()" novalidate autocomplete="off">
   <div class="tb-multiple-input-container" *ngIf="entityDetected && isAllParametersValid">
-    <fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}">
+    <fieldset *ngFor="let source of sources" [class.fields-group]="settings.showGroupTitle">
       <legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }}
       </legend>
       <div class="tb-multiple-input-layout"
@@ -198,10 +198,10 @@
     </button>
   </div>
   <div class="tb-multiple-input--errors-container" *ngIf="(!entityDetected || !isAllParametersValid) && datasourceDetected">
-    <div class="tb-multiple-input--errors-container__error" [fxHide]="entityDetected">
+    <div class="tb-multiple-input--errors-container__error" [class.!hidden]="entityDetected">
       {{ 'widgets.input-widgets.no-entity-selected' | translate }}
     </div>
-    <div class="tb-multiple-input--errors-container__error" [fxShow]="entityDetected && !isAllParametersValid">
+    <div class="tb-multiple-input--errors-container__error" [class.!hidden]="!entityDetected || isAllParametersValid">
       {{ 'widgets.input-widgets.not-allowed-entity' | translate }}
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
index fb90c12bd5..f5d51880c2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" fxLayoutAlign="center center" class="tb-web-camera" tb-fullscreen [fullscreen]="isShowCamera">
+<div class="tb-web-camera flex flex-col justify-center items-center" tb-fullscreen [fullscreen]="isShowCamera">
   <div *ngIf="isEntityDetected && dataKeyDetected && isCameraSupport && isProtocolHttps" class="image-container">
-    <div [fxShow]="!isShowCamera" fxLayout="column" fxLayoutAlign="space-between center" fxFlexFill>
-      <div class="tb-web-camera__last-photo" fxFlex>
-        <span [fxShow]="!lastPhoto" class="tb-web-camera__last-photo_text" translate>widgets.input-widgets.no-image</span>
-        <img [fxShow]="lastPhoto" class="tb-web-camera__last-photo_img" [src]="lastPhoto" alt="last photo"/>
+    <div [class.!hidden]="isShowCamera" class="flex flex-col justify-between items-center w-full h-full">
+      <div class="tb-web-camera__last-photo flex-1">
+        <span [class.!hidden]="lastPhoto" class="tb-web-camera__last-photo_text" translate>widgets.input-widgets.no-image</span>
+        <img [class.!hidden]="!lastPhoto" class="tb-web-camera__last-photo_img" [src]="lastPhoto" alt="last photo"/>
       </div>
       <button mat-raised-button color="primary" (click)="takePhoto()" *ngIf="!textMessage">
         {{ "widgets.input-widgets.take-photo" | translate }}
       </button>
     </div>
-    <div [fxShow]="isShowCamera" fxLayout="column" fxLayoutAlign="center center" class="camera-container">
-      <div class="camera" [fxShow]="!isPreviewPhoto">
+    <div [class.!hidden]="!isShowCamera" class="camera-container flex flex-col justify-center items-center">
+      <div class="camera" [class.!hidden]="isPreviewPhoto">
         <video autoplay muted playsinline class="camera-stream" #videoStream></video>
-        <div class="camera-controls" fxLayout="row wrap" fxLayoutAlign="space-between end">
-          <div fxFlex></div>
+        <div class="camera-controls flex flex-row flex-wrap justify-between items-end">
+          <div class="flex-1"></div>
           <button mat-mini-fab color="primary" (click)="switchWebCamera()" [disabled]="singleDevice">
             <mat-icon>switch_camera</mat-icon>
           </button>
@@ -40,21 +40,21 @@
           <button mat-mini-fab color="primary" (click)="closeCamera()">
             <mat-icon>close</mat-icon>
           </button>
-          <div fxFlex></div>
+          <div class="flex-1"></div>
         </div>
       </div>
-      <div class="camera" [fxShow]="isPreviewPhoto">
+      <div class="camera" [class.!hidden]="!isPreviewPhoto">
         <img alt="preview photo" class="camera-stream" [src]="previewPhoto">
         <canvas #canvas style="display:none;"></canvas>
-        <div class="camera-controls" fxLayout="row" fxLayoutAlign="space-between end">
-          <div fxFlex></div>
+        <div class="camera-controls flex flex-row justify-between items-end">
+          <div class="flex-1"></div>
           <button mat-fab color="primary" [disabled]="updatePhoto" (click)="cancelPhoto()">
             <mat-icon>close</mat-icon>
           </button>
           <button mat-fab color="accent" [disabled]="updatePhoto" (click)="savePhoto()">
             <mat-icon>check</mat-icon>
           </button>
-          <div fxFlex></div>
+          <div class="flex-1"></div>
         </div>
       </div>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
index d60b36a5dc..66981fc62f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" fxLayoutAlign="center center" style="width: 100%; height: 100%;">
-  <canvas fxFlex #canvas [ngStyle]="{display: qrCodeText && !invalidQrCodeText ? 'block' : 'none'}"></canvas>
+<div class="flex flex-col justify-center items-center w-full h-full">
+  <canvas class="flex-1" #canvas [class.!hidden]="!qrCodeText || invalidQrCodeText"></canvas>
   <div *ngIf="!qrCodeText && !invalidQrCodeText" style="text-align: center" translate>entity.no-data</div>
   <div *ngIf="invalidQrCodeText" style="text-align: center" translate>widgets.invalid-qr-code-text</div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
index 98d1090f4d..06ad7e4144 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
@@ -16,15 +16,15 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+  <div class="tb-absolute-fill flex-1 flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -37,78 +37,84 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-tab-group [ngClass]="{'tb-headless': sources.length === 1}" fxFlex
+    <mat-tab-group [class.tb-headless]="sources.length === 1"
+                   class="flex-1"
                    mat-stretch-tabs="false"
                    [(selectedIndex)]="sourceIndex" (selectedIndexChange)="onSourceIndexChanged()">
       <mat-tab *ngFor="let source of sources; trackBy: trackBySourcesIndex; let index = index;" [label]="getTabLabel(source)">
         <ng-template [ngIf]="isActiveTab(index)">
-          <div fxFlex class="table-container">
+          <div class="table-container flex-1">
             <table mat-table [dataSource]="source.timeseriesDatasource" [trackBy]="trackByRowTimestamp"
                        matSort [matSortActive]="source.pageLink.sortOrder.property" [matSortDirection]="source.pageLink.sortDirection()" matSortDisableClear>
               <ng-container *ngIf="showTimestamp" [matColumnDef]="'0'">
                 <mat-header-cell *matHeaderCellDef mat-sort-header>Timestamp</mat-header-cell>
                 <mat-cell *matCellDef="let row; let rowIndex = index"
                           [innerHTML]="cellContent(source, null, 0, row, row[0], rowIndex)"
-                          [ngStyle]="cellStyle(source, null, 0, row, row[0], rowIndex)">
+                          [style]="cellStyle(source, null, 0, row, row[0], rowIndex)">
                 </mat-cell>
               </ng-container>
               <ng-container [matColumnDef]="h.index + ''" *ngFor="let h of source.header; trackBy: trackByColumnIndex;">
                 <mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!h.sortable"> {{ h.dataKey.label }} </mat-header-cell>
                 <mat-cell *matCellDef="let row; let rowIndex = index"
                           [innerHTML]="cellContent(source, h, h.index, row, row[h.index], rowIndex)"
-                          [ngStyle]="cellStyle(source, h, h.index, row, row[h.index], rowIndex)">
+                          [style]="cellStyle(source, h, h.index, row, row[h.index], rowIndex)">
                 </mat-cell>
               </ng-container>
               <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
-                <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
-                                                                      maxWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
-                                                                      width: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px' }">
+                <mat-header-cell *matHeaderCellDef>
+                  <ng-container *ngIf="source.timeseriesDatasource.countCellButtonAction">
+                    <div class="gt-md:!hidden" style="min-width: 40px;">
+                    </div>
+                    <div class="lt-lg:!hidden"
+                         [style.min-width]="(source.timeseriesDatasource.countCellButtonAction * 40) + 'px'">
+                    </div>
+                  </ng-container>
                 </mat-header-cell>
-                <mat-cell *matCellDef="let row; let rowIndex = index" [style]="rowStyle(source, row, rowIndex)" [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
-                                                                   maxWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
-                                                                   width: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px' }">
-                  <div [fxHide]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-                    <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                      <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
-                      <button *ngIf="actionDescriptor.icon"
-                              class="tb-mat-40"
-                              mat-icon-button [disabled]="isLoading$ | async"
-                              matTooltip="{{ actionDescriptor.displayName }}"
-                              matTooltipPosition="above"
-                              (click)="onActionButtonClick($event, row, actionDescriptor)">
-                        <tb-icon>{{actionDescriptor.icon}}</tb-icon>
-                      </button>
-                    </ng-container>
-                  </div>
-                  <div fxHide [fxShow.lt-lg]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" *ngIf="row.hasActions">
-                    <button mat-icon-button
-                            class="tb-mat-40"
-                            (click)="$event.stopPropagation(); ctx.detectChanges();"
-                            [matMenuTriggerFor]="cellActionsMenu">
-                      <mat-icon class="material-icons">more_vert</mat-icon>
-                    </button>
-                    <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                <mat-cell *matCellDef="let row; let rowIndex = index" [style]="rowStyle(source, row, rowIndex)">
+                  <ng-container *ngIf="source.timeseriesDatasource.countCellButtonAction">
+                    <div [class.lt-lg:!hidden]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" class="flex flex-row justify-end items-stretch"
+                         [style.min-width]="(source.timeseriesDatasource.countCellButtonAction * 40) + 'px'">
                       <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                        <button mat-menu-item *ngIf="actionDescriptor.icon"
-                                [disabled]="isLoading$ | async"
+                        <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
+                        <button *ngIf="actionDescriptor.icon"
+                                class="tb-mat-40"
+                                mat-icon-button [disabled]="isLoading$ | async"
+                                matTooltip="{{ actionDescriptor.displayName }}"
+                                matTooltipPosition="above"
                                 (click)="onActionButtonClick($event, row, actionDescriptor)">
-                          <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                          <span>{{ actionDescriptor.displayName }}</span>
+                          <tb-icon>{{actionDescriptor.icon}}</tb-icon>
                         </button>
                       </ng-container>
-                    </mat-menu>
-                  </div>
+                    </div>
+                    <div [class.!hidden]="!showCellActionsMenu || source.timeseriesDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="row.hasActions">
+                      <button mat-icon-button
+                              class="tb-mat-40"
+                              (click)="$event.stopPropagation(); ctx.detectChanges();"
+                              [matMenuTriggerFor]="cellActionsMenu">
+                        <mat-icon class="material-icons">more_vert</mat-icon>
+                      </button>
+                      <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                        <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
+                          <button mat-menu-item *ngIf="actionDescriptor.icon"
+                                  [disabled]="isLoading$ | async"
+                                  (click)="onActionButtonClick($event, row, actionDescriptor)">
+                            <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                            <span>{{ actionDescriptor.displayName }}</span>
+                          </button>
+                        </ng-container>
+                      </mat-menu>
+                    </div>
+                  </ng-container>
                 </mat-cell>
               </ng-container>
               <mat-header-row *matHeaderRowDef="source.displayedColumns; sticky: enableStickyHeader"></mat-header-row>
-              <mat-row [ngClass]="{'tb-pointer': hasRowAction}"
+              <mat-row [class.tb-pointer]="hasRowAction"
                        *matRowDef="let row; columns: source.displayedColumns; let rowIndex = index"
-                       [ngStyle]="rowStyle(source, row, rowIndex)"
+                       [style]="rowStyle(source, row, rowIndex)"
                        (click)="onRowClick($event, row)"></mat-row>
             </table>
-            <span [fxShow]="source.timeseriesDatasource.isEmpty() | async"
-                  fxLayoutAlign="center center"
-                  class="no-data-found">{{ noDataDisplayMessageText }}</span>
+            <span [class.!hidden]="(source.timeseriesDatasource.isEmpty() | async) === false"
+                  class="no-data-found flex justify-center items-center">{{ noDataDisplayMessageText }}</span>
           </div>
           <mat-divider *ngIf="displayPagination"></mat-divider>
           <mat-paginator *ngIf="displayPagination"