From c5c732446e1e3cad5e5c7d888c63bec287898f36 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 16 Oct 2024 15:24:20 +0300
Subject: [PATCH] Flex layout replacements. Switch to tailwind.css.

---
 ...pio-control-widget-settings.component.html |  16 +--
 .../settings/gpio/gpio-item.component.html    |  26 ++---
 .../gpio-panel-widget-settings.component.html |  10 +-
 .../doc-links-widget-settings.component.html  |   4 +-
 ...quick-links-widget-settings.component.html |   4 +-
 ...ttery-level-widget-settings.component.html |   2 +-
 ...-level-card-widget-settings.component.html |  15 ++-
 ...al-strength-widget-settings.component.html |  15 ++-
 .../status-widget-settings.component.html     |   6 +-
 .../datakey-select-option.component.html      |  18 +--
 ...ce-claiming-widget-settings.component.html |  28 ++---
 ...amera-input-widget-settings.component.html |  14 +--
 ...-attribute-general-settings.component.html |  14 +--
 ...n-attribute-widget-settings.component.html |   8 +-
 ...e-attribute-widget-settings.component.html |   2 +-
 ...e-attribute-widget-settings.component.html |   8 +-
 ...e-attribute-widget-settings.component.html |   4 +-
 ...r-attribute-widget-settings.component.html |   8 +-
 ...n-attribute-widget-settings.component.html |  14 +--
 ...n-attribute-widget-settings.component.html |  24 ++--
 ...ple-attributes-key-settings.component.html | 108 +++++++++---------
 ...-attributes-widget-settings.component.html |  34 +++---
 ...g-attribute-widget-settings.component.html |   8 +-
 ...gation-card-widget-settings.component.html |   8 +-
 ...ation-cards-widget-settings.component.html |   6 +-
 ...d-direction-widget-settings.component.html |  10 +-
 .../trip-animation.component.html             |  12 +-
 27 files changed, 213 insertions(+), 213 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
index 559854c50c..377fcd6ddd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="gpioControlWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="gpioControlWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gpio.panel-settings</legend>
     <tb-color-input
@@ -26,11 +26,11 @@
     </tb-color-input>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.gpio.gpio-switches</legend>
-      <div fxLayout="column">
+      <div class="flex flex-col">
         <div class="tb-control-list">
           <div *ngFor="let gpioItemControl of gpioListFormArray().controls; trackBy: trackByGpioItem;
                  let $index = index; last as isLast;"
-               fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+               class="flex flex-col" [class.pb-2]="!isLast">
             <tb-gpio-item [formControl]="gpioItemControl"
                           [expanded]="gpioItemControl.new"
                           (removeGpioItem)="removeGpioItem($index)">
@@ -38,8 +38,8 @@
           </div>
         </div>
         <div *ngIf="!gpioListFormArray().controls.length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">widgets.gpio.no-gpio-switches</span>
+            <span translate
+                  class="tb-prompt flex items-center justify-center">widgets.gpio.no-gpio-switches</span>
         </div>
         <div style="padding-top: 16px;">
           <button mat-raised-button color="primary"
@@ -53,13 +53,13 @@
   </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" formGroupName="gpioStatusRequest">
       <legend class="group-title" translate>widgets.gpio.gpio-status-request</legend>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.gpio.method-name</mat-label>
         <input required matInput formControlName="method">
       </mat-form-field>
@@ -73,7 +73,7 @@
     </fieldset>
     <fieldset class="fields-group" formGroupName="gpioStatusChangeRequest">
       <legend class="group-title" translate>widgets.gpio.gpio-status-change-request</legend>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.gpio.method-name</mat-label>
         <input required matInput formControlName="method">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
index 53dcb0ad9a..e3ef6af85a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="gpio-item" fxFlex [formGroup]="gpioItemFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="gpio-item flex-1" [formGroup]="gpioItemFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           <div>
             <span>{{ gpioItemFormGroup.value.label || 'Undefined' }} (</span><small>pin:</small>
             <span>{{ numberText(gpioItemFormGroup.value.pin, 0) }}) - [</span><small>row:</small>
@@ -27,11 +27,11 @@
             <span>{{ numberText(gpioItemFormGroup.value.col, -1) }}]</span>
           </div>
           <div *ngIf="hasColor" class="tb-color-preview" style="margin-left: 6px;">
-            <div class="tb-color-result" [ngStyle]="{background: gpioItemFormGroup.get('color').value}"></div>
+            <div class="tb-color-result" [style.background]="gpioItemFormGroup.get('color').value"></div>
           </div>
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeGpioItem.emit()"
@@ -42,25 +42,25 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <section class="tb-widget-settings" fxLayout="column">
-        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-          <mat-form-field fxFlex class="mat-block">
+      <section class="tb-widget-settings flex flex-col">
+        <section class="flex flex-row xs:flex-col gt-xs:gap-2 gt-xs:items-center gt-xs:justify-start">
+          <mat-form-field class="mat-block flex=1">
             <mat-label translate>widgets.gpio.pin</mat-label>
             <input required matInput type="number" min="1" step="1" formControlName="pin">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.gpio.label</mat-label>
             <input required matInput formControlName="label">
           </mat-form-field>
         </section>
-        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-          <mat-form-field fxFlex class="mat-block">
+        <section class="flex flex-row xs:flex-col gt-xs:gap-2 gt-xs:items-center gt-xs:justify-start">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.gpio.row</mat-label>
             <input required matInput type="number" min="0" step="1" formControlName="row">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.gpio.column</mat-label>
             <input required matInput type="number" min="0" max="1" step="1" formControlName="col">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html
index 7a0c15467a..fe1d8ce226 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="gpioPanelWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="gpioPanelWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gpio.panel-settings</legend>
     <tb-color-input
@@ -26,11 +26,11 @@
     </tb-color-input>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.gpio.gpio-leds</legend>
-      <div fxLayout="column">
+      <div class="flex flex-col">
         <div class="tb-control-list">
           <div *ngFor="let gpioItemControl of gpioListFormArray().controls; trackBy: trackByGpioItem;
                  let $index = index; last as isLast;"
-               fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+               class="flex flex-col" [class.pb-2]="!isLast">
             <tb-gpio-item [formControl]="gpioItemControl"
                           [hasColor]="true"
                           [expanded]="gpioItemControl.new"
@@ -39,8 +39,8 @@
           </div>
         </div>
         <div *ngIf="!gpioListFormArray().controls.length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">widgets.gpio.no-gpio-leds</span>
+            <span translate
+                  class="tb-prompt flex items-center justify-center">widgets.gpio.no-gpio-leds</span>
         </div>
         <div style="padding-top: 16px;">
           <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
index d001b2c23a..6b4ab4ae75 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="docLinksWidgetSettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
+<section class="tb-widget-settings flex flex-col" [formGroup]="docLinksWidgetSettingsForm">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.documentation.columns</mat-label>
     <input required matInput type="number" step="1" min="1" max="20" formControlName="columns">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html
index 91a3bb3bfa..896983690c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="quickLinksWidgetSettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
+<section class="tb-widget-settings flex flex-col" [formGroup]="quickLinksWidgetSettingsForm">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.quick-links.columns</mat-label>
     <input required matInput type="number" step="1" min="1" max="20" formControlName="columns">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
index 572c50c392..79e7db6f6b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
@@ -40,7 +40,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 items-center justify-start 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/lib/settings/indicator/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
index 81e2b2b1da..a1aae64747 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
@@ -18,7 +18,7 @@
 <ng-container *ngIf="levelCardWidgetSettingsForm"  [formGroup]="levelCardWidgetSettingsForm">
   <div class="tb-form-panel no-padding no-border">
     <div class="tb-form-panel">
-      <div fxFlex fxLayout="column" class="tb-form-row space-between">
+      <div class="tb-form-row space-between flex 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">
@@ -28,7 +28,7 @@
           </tb-toggle-select>
         </div>
         <tb-image-cards-select #shapesImageCardsSelect
-                               [fxShow]="levelCardWidgetSettingsForm.get('tankSelectionType').value === DataSourceType.static"
+                               [class.!hidden]="levelCardWidgetSettingsForm.get('tankSelectionType').value !== DataSourceType.static"
                                rowHeight="1:1"
                                [cols]="{columns: 5,
                                     breakpoints: {
@@ -143,7 +143,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%">
@@ -225,10 +225,9 @@
       <mat-expansion-panel class="tb-settings"
                            [expanded]="levelCardWidgetSettingsForm.get('showTooltip').value"
                            [disabled]="!levelCardWidgetSettingsForm.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widget-config.tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -245,7 +244,7 @@
               <mat-form-field appearance="outline" class="number flex" 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">
@@ -259,7 +258,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/lib/settings/indicator/signal-strength-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
index 7124ee0f02..2cc8624bea 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
@@ -34,8 +34,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="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
@@ -79,10 +79,9 @@
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="signalStrengthWidgetSettingsForm.get('showTooltip').value"
                          [disabled]="!signalStrengthWidgetSettingsForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -92,7 +91,7 @@
           <mat-slide-toggle class="mat-slide" formControlName="showTooltipValue">
             {{ 'tooltip.value' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipValueFont"
                               [previewText]="tooltipValuePreviewFn">
             </tb-font-settings>
@@ -106,8 +105,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="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+            <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/lib/settings/indicator/status-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
index 892311733c..7102c01200 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
@@ -20,7 +20,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 }}"
@@ -33,7 +33,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 }}"
@@ -60,7 +60,7 @@
     </tb-image-cards-select>
   </div>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>widget-config.card-style</div>
       <tb-toggle-select [(ngModel)]="cardStyleMode"
                         [ngModelOptions]="{ standalone: true }">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
index a92f7744e0..a5995b7a65 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="datakey-select-option" fxFlex [formGroup]="selectOptionFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="datakey-select-option flex-1" [formGroup]="selectOptionFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           <div>
             <span>{{ selectOptionFormGroup.value.value || 'Undefined' }} </span>
             <span *ngIf="selectOptionFormGroup.value.label">(<small>{{ selectOptionFormGroup.value.label }}</small>)</span>
           </div>
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeSelectOption.emit()"
@@ -37,15 +37,15 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <section class="tb-widget-settings" fxLayout="column">
-        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-          <mat-form-field fxFlex class="mat-block">
+      <section class="tb-widget-settings flex flex-col">
+        <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.input-widgets.option-value</mat-label>
             <input required matInput formControlName="value">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.input-widgets.option-label</mat-label>
             <input matInput formControlName="label">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html
index f233851bd3..b6aa490c98 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html
@@ -15,14 +15,14 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="deviceClaimingWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="deviceClaimingWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-button-label</mat-label>
       <input matInput formControlName="labelClaimButon">
     </mat-form-field>
@@ -33,24 +33,24 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.input-widgets.labels-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="deviceClaimingWidgetSettingsForm.get('showLabel').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="showLabel" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.input-widgets.show-labels' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column">
-          <mat-form-field fxFlex class="mat-block">
+        <section class="flex flex-col">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.input-widgets.device-name-label</mat-label>
             <input matInput formControlName="deviceLabel">
           </mat-form-field>
-          <mat-form-field [fxShow]="deviceClaimingWidgetSettingsForm.get('deviceSecret').value" fxFlex class="mat-block">
+          <mat-form-field [class.!hidden]="!deviceClaimingWidgetSettingsForm.get('deviceSecret').value" class="mat-block flex-1">
             <mat-label translate>widgets.input-widgets.secret-key-label</mat-label>
             <input matInput formControlName="secretKeyLabel">
           </mat-form-field>
@@ -60,23 +60,23 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.messages-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-success-message</mat-label>
       <input matInput formControlName="successfulClaimDevice">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-not-found-message</mat-label>
       <input matInput formControlName="deviceNotFound">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-failed-message</mat-label>
       <input matInput formControlName="failedClaimDevice">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-name-required-message</mat-label>
       <input matInput formControlName="requiredErrorDevice">
     </mat-form-field>
-    <mat-form-field [fxShow]="deviceClaimingWidgetSettingsForm.get('deviceSecret').value" fxFlex class="mat-block">
+    <mat-form-field [class.!hidden]="!deviceClaimingWidgetSettingsForm.get('deviceSecret').value" class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-secret-key-required-message</mat-label>
       <input matInput formControlName="requiredErrorSecretKey">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
index 12d3eb6b42..7941ed9169 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
@@ -18,15 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="photoCameraInputWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.image-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.image-format</mat-label>
         <mat-select formControlName="imageFormat">
           <mat-option [value]="'image/jpeg'">
@@ -40,17 +40,17 @@
           </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.input-widgets.image-quality</mat-label>
         <input matInput type="number" min="0" max="1" formControlName="imageQuality">
       </mat-form-field>
     </section>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-image-width</mat-label>
         <input matInput type="number" min="1" formControlName="maxWidth">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-image-height</mat-label>
         <input matInput type="number" min="1" formControlName="maxHeight">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
index 3a112819c7..4ab4f5beb0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
@@ -18,24 +18,24 @@
 <section class="tb-widget-settings" [formGroup]="updateAttributeGeneralSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle fxFlex fxFlex.gt-xs="25" formControlName="showLabel">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="showLabel">
         {{ 'widgets.input-widgets.show-label' | translate }}
       </mat-slide-toggle>
-      <mat-form-field *ngIf="hasLabelValue" fxFlex class="mat-block">
+      <mat-form-field *ngIf="hasLabelValue" class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.label</mat-label>
         <input matInput formControlName="labelValue">
       </mat-form-field>
     </section>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle fxFlex fxFlex.gt-xs="25" formControlName="isRequired">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="isRequired">
         {{ 'widgets.input-widgets.required' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.required-error-message</mat-label>
         <input matInput formControlName="requiredErrorMessage">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
index 445607c7ac..bd5d44612e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="updateBooleanAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
@@ -28,12 +28,12 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.checkbox-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.true-label</mat-label>
         <input matInput formControlName="trueValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.false-label</mat-label>
         <input matInput formControlName="falseValue">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-date-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-date-attribute-widget-settings.component.html
index d6ed59294f..cf1c83e00c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-date-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-date-attribute-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateDateAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateDateAttributeWidgetSettingsForm">
   <tb-update-attribute-general-settings
     [hasLabelValue]="false"
     formControlName="updateAttributeGeneralSettings">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
index 208d64d9f4..4401f0f67b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateDoubleAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateDoubleAttributeWidgetSettingsForm">
   <tb-update-attribute-general-settings
     formControlName="updateAttributeGeneralSettings">
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.double-field-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input matInput type="number" step="any" formControlName="minValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-value</mat-label>
         <input matInput type="number" step="any" formControlName="maxValue">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
index dd42a1e9b4..c100e4358c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="updateImageAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
@@ -28,7 +28,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.image-input-settings</legend>
-    <section fxLayout="column">
+    <section class="flex flex-col">
       <mat-slide-toggle formControlName="displayPreview" class="slide-block">
         {{ 'widgets.input-widgets.display-preview' | translate }}
       </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
index 531aeaa520..5ae015dcb5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateIntegerAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateIntegerAttributeWidgetSettingsForm">
   <tb-update-attribute-general-settings
     formControlName="updateAttributeGeneralSettings">
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.integer-field-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input matInput type="number" step="1" formControlName="minValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-value</mat-label>
         <input matInput type="number" step="1" formControlName="maxValue">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
index ad0ff01440..58033b1d4e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
@@ -18,15 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateJsonAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle fxFlex fxFlex.gt-xs="25" formControlName="showLabel">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="showLabel">
         {{ 'widgets.input-widgets.show-label' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.label</mat-label>
         <input matInput formControlName="labelValue">
       </mat-form-field>
@@ -37,8 +37,8 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.attribute-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.widget-mode</mat-label>
         <mat-select formControlName="widgetMode">
           <mat-option [value]="'ATTRIBUTE'">
@@ -49,7 +49,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field [fxShow]="updateJsonAttributeWidgetSettingsForm.get('widgetMode').value === 'ATTRIBUTE'" fxFlex class="mat-block">
+      <mat-form-field [class.!hidden]="updateJsonAttributeWidgetSettingsForm.get('widgetMode').value !== 'ATTRIBUTE'" class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.attribute-scope</mat-label>
         <mat-select formControlName="attributeScope">
           <mat-option [value]="'SERVER_SCOPE'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
index 93367001b2..c4bdfeadff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
@@ -18,19 +18,19 @@
 <section class="tb-widget-settings" [formGroup]="updateLocationAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
     <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.latitude-key-name</mat-label>
         <input matInput formControlName="latKeyName">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.longitude-key-name</mat-label>
         <input matInput formControlName="lngKeyName">
       </mat-form-field>
@@ -47,17 +47,17 @@
     <mat-slide-toggle formControlName="showLabel" class="slide-block">
       {{ 'widgets.input-widgets.show-label' | translate }}
     </mat-slide-toggle>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.latitude-label</mat-label>
         <input matInput formControlName="latLabel">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.longitude-label</mat-label>
         <input matInput formControlName="lngLabel">
       </mat-form-field>
     </section>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.input-fields-alignment</mat-label>
       <mat-select formControlName="inputFieldsAlignment">
         <mat-option [value]="'column'">
@@ -68,15 +68,15 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle class="slide-block" fxFlex formControlName="isLatRequired">
+    <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
+      <mat-slide-toggle class="slide-block flex-1" formControlName="isLatRequired">
         {{ 'widgets.input-widgets.latitude-field-required' | translate }}
       </mat-slide-toggle>
-      <mat-slide-toggle class="slide-block" fxFlex formControlName="isLngRequired">
+      <mat-slide-toggle class="slide-block flex-1" formControlName="isLngRequired">
         {{ 'widgets.input-widgets.longitude-field-required' | translate }}
       </mat-slide-toggle>
     </section>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.required-error-message</mat-label>
       <input matInput formControlName="requiredErrorMessage">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
index 0e12c926f8..b3ef2f9358 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
@@ -19,10 +19,10 @@
   <mat-slide-toggle formControlName="dataKeyHidden" class="slide-block">
     {{ 'widgets.input-widgets.hide-input-field' | translate }}
   </mat-slide-toggle>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.datakey-type</mat-label>
         <mat-select formControlName="dataKeyType">
           <mat-option [value]="'server'">
@@ -36,7 +36,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex="50" class="mat-block">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.datakey-value-type</mat-label>
         <mat-select formControlName="dataKeyValueType">
           <mat-option [value]="'string'">
@@ -78,8 +78,8 @@
     <mat-checkbox formControlName="required" style="margin-bottom: 8px;">
       {{ 'widgets.input-widgets.value-is-required' | translate }}
     </mat-checkbox>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.ability-to-edit-attribute</mat-label>
         <mat-select formControlName="isEditable">
           <mat-option [value]="'editable'">
@@ -93,14 +93,14 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('isEditable').value === 'editable'" fxFlex="50" class="mat-block">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('isEditable').value !== 'editable'" class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.disable-on-datakey-name</mat-label>
         <input matInput formControlName="disabledOnDataKey">
       </mat-form-field>
     </section>
     <section *ngIf="!['booleanSwitch', 'booleanCheckbox'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
-             fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+             class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.field-appearance</mat-label>
         <mat-select formControlName="appearance">
           <mat-option [value]="'fill'">
@@ -111,7 +111,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex="50" class="mat-block">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.subscript-sizing</mat-label>
         <mat-select formControlName="subscriptSizing">
           <mat-option [value]="'fixed'">
@@ -124,10 +124,10 @@
       </mat-form-field>
     </section>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                       updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'booleanSwitch'" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'booleanSwitch'" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.slide-toggle-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.slide-toggle-label-position</mat-label>
       <mat-select formControlName="slideToggleLabelPosition">
         <mat-option [value]="'after'">
@@ -139,15 +139,15 @@
       </mat-select>
     </mat-form-field>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                       updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'select'" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'select'" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.select-options</legend>
-    <div fxLayout="column">
+    <div class="flex flex-col">
       <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
            (cdkDropListDropped)="selectOptionDrop($event)">
         <div cdkDrag class="tb-draggable" *ngFor="let selectOptionControl of selectOptionsFormArray().controls; trackBy: trackBySelectOption;
                  let $index = index; last as isLast;"
-             fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+             class="flex flex-col" [class.pb-2]="!isLast">
           <tb-datakey-select-option [formControl]="selectOptionControl"
                                     [expanded]="selectOptionControl.new"
                                     (removeSelectOption)="removeSelectOption($index)">
@@ -155,8 +155,8 @@
         </div>
       </div>
       <div *ngIf="!selectOptionsFormArray().controls.length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">widgets.input-widgets.no-select-options</span>
+            <span translate
+                  class="tb-prompt flex items-center justify-center">widgets.input-widgets.no-select-options</span>
       </div>
       <div style="padding-top: 16px;">
         <button mat-raised-button color="primary"
@@ -167,102 +167,102 @@
       </div>
     </div>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                       (updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'integer' ||
-                        updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'double')" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             (updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'integer' &&
+                             updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'double')" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.numeric-field-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.step-interval</mat-label>
         <input matInput type="number" min="0" formControlName="step">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input 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.input-widgets.max-value</mat-label>
         <input matInput type="number" formControlName="maxValue">
       </mat-form-field>
     </section>
   </fieldset>
-  <fieldset [fxShow]="displayErrorMessagesSection()" class="fields-group">
+  <fieldset [class.!hidden]="!displayErrorMessagesSection()" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.error-messages</legend>
-    <mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('required').value" fxFlex class="mat-block">
+    <mat-form-field [class.!hidden]="!updateMultipleAttributesKeySettingsForm.get('required').value" class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.required-error-message</mat-label>
       <input matInput formControlName="requiredErrorMessage">
     </mat-form-field>
-    <section [fxShow]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'integer' ||
-                       updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'double'"
-             fxLayout="row" fxLayoutGap="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'integer' &&
+                              updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'double'"
+             class="flex flex-row gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-value-error-message</mat-label>
         <input matInput formControlName="minValueErrorMessage">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-value-error-message</mat-label>
         <input matInput formControlName="maxValueErrorMessage">
       </mat-form-field>
     </section>
-    <mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'dateTime' ||
-                              updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'date' ||
-                              updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'time'" fxFlex class="mat-block">
+    <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'dateTime' &&
+                                     updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'date' &&
+                                     updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'time'" class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.invalid-date-error-message</mat-label>
       <input matInput formControlName="invalidDateErrorMessage">
     </mat-form-field>
-    <mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'JSON'" fxFlex class="mat-block">
+    <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'JSON'" class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.invalid-JSON-error-message</mat-label>
       <input matInput formControlName="invalidJsonErrorMessage">
     </mat-form-field>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                      updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'JSON'" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'JSON'"class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.dialog-editor-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.title</mat-label>
       <input matInput formControlName="dialogTitle">
     </mat-form-field>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.save-button-label</mat-label>
         <input matInput formControlName="saveButtonLabel">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.cancel-button-label</mat-label>
         <input matInput formControlName="cancelButtonLabel">
       </mat-form-field>
     </section>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                      !['date', 'dateTime', 'time'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             ['date', 'dateTime', 'time'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
             class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.icon-settings</legend>
     <mat-slide-toggle formControlName="useCustomIcon" class="slide-block">
       {{ 'widgets.input-widgets.use-custom-icon' | translate }}
     </mat-slide-toggle>
-    <tb-material-icon-select [fxShow]="!updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
+    <tb-material-icon-select [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
                              label="{{ 'widgets.input-widgets.input-cell-icon' | translate }}"
                              iconClearButton
                              formControlName="icon">
     </tb-material-icon-select>
-    <tb-gallery-image-input [fxShow]="updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
+    <tb-gallery-image-input [class.!hidden]="!updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
                     label="{{ 'widgets.input-widgets.input-cell-icon' | translate }}"
                     formControlName="customIcon">
     </tb-gallery-image-input>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.value-conversion-settings</legend>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.input-widgets.get-value-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="updateMultipleAttributesKeySettingsForm.get('useGetValueFunction').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="useGetValueFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.input-widgets.use-get-value-function' | 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>
@@ -278,14 +278,14 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.input-widgets.set-value-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="updateMultipleAttributesKeySettingsForm.get('useSetValueFunction').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="useSetValueFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.input-widgets.use-set-value-function' | 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>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
index c9a6987c47..30ab7a6273 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="updateMultipleAttributesWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
@@ -29,28 +29,28 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.input-widgets.action-buttons</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="updateMultipleAttributesWidgetSettingsForm.get('showActionButtons').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="showActionButtons" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.input-widgets.show-action-buttons' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column">
+        <section class="flex flex-col">
           <mat-checkbox formControlName="updateAllValues" style="margin-bottom: 8px;">
             {{ 'widgets.input-widgets.update-all-values' | translate }}
           </mat-checkbox>
-          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-            <mat-form-field fxFlex class="mat-block">
+          <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>widgets.input-widgets.save-button-label</mat-label>
               <input matInput formControlName="saveButtonLabel">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>widgets.input-widgets.reset-button-label</mat-label>
               <input matInput formControlName="resetButtonLabel">
             </mat-form-field>
@@ -61,11 +61,11 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.group-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle fxFlex="30" formControlName="showGroupTitle" class="slide-block">
+    <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
+      <mat-slide-toggle formControlName="showGroupTitle" class="slide-block max-w-30% flex-full">
         {{ 'widgets.input-widgets.show-group-title' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex="70" class="mat-block">
+      <mat-form-field class="mat-block max-w-70% flex-full">
         <mat-label translate>widgets.input-widgets.group-title</mat-label>
         <input matInput formControlName="groupTitle">
       </mat-form-field>
@@ -73,8 +73,8 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.layout</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.fields-alignment</mat-label>
         <mat-select formControlName="fieldsAlignment">
           <mat-option [value]="'row'">
@@ -85,17 +85,17 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex="50" [fxShow]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value === 'row'" class="mat-block">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.fields-in-row</mat-label>
         <input matInput type="number" min="1" step="1" formControlName="fieldsInRow">
       </mat-form-field>
     </section>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.row-gap</mat-label>
         <input matInput type="number" min="0" step="1" formControlName="rowGap">
       </mat-form-field>
-      <mat-form-field fxFlex="50" [fxShow]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value === 'row'" class="mat-block">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.column-gap</mat-label>
         <input matInput type="number" min="0" step="1" formControlName="columnGap">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
index 0adaf95e82..9d14b90ec9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateStringAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateStringAttributeWidgetSettingsForm">
   <tb-update-attribute-general-settings
     formControlName="updateAttributeGeneralSettings">
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.text-field-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-length</mat-label>
         <input matInput type="number" step="1" min="0" formControlName="minLength">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-length</mat-label>
         <input matInput type="number" step="1" min="1" formControlName="maxLength">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html
index c9f813843d..c29b89d1a0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html
@@ -15,17 +15,17 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="navigationCardWidgetSettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
+<section class="tb-widget-settings flex flex-col" [formGroup]="navigationCardWidgetSettingsForm">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.navigation.title</mat-label>
     <input required matInput formControlName="name">
   </mat-form-field>
-  <tb-material-icon-select fxFlex
+  <tb-material-icon-select class="flex-1"
                            iconClearButton
                            required
                            formControlName="icon">
   </tb-material-icon-select>
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.navigation.navigation-path</mat-label>
     <input required matInput formControlName="path">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
index 8769614bdf..9dc90bdfda 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
@@ -15,16 +15,16 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="navigationCardsWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="navigationCardsWidgetSettingsForm">
   <section style="margin-bottom: 16px;">
     <div class="mat-caption" style="margin: -8px 0 8px;" translate>widgets.navigation.filter-type</div>
-    <mat-radio-group formControlName="filterType" fxLayoutGap="16px">
+    <mat-radio-group formControlName="filterType" class="gap-4">
       <mat-radio-button [value]="'all'">{{ 'widgets.navigation.filter-type-all' | translate }}</mat-radio-button>
       <mat-radio-button [value]="'include'">{{ 'widgets.navigation.filter-type-include' | translate }}</mat-radio-button>
       <mat-radio-button [value]="'exclude'">{{ 'widgets.navigation.filter-type-exclude' | translate }}</mat-radio-button>
     </mat-radio-group>
   </section>
-  <mat-form-field [fxShow]="navigationCardsWidgetSettingsForm.get('filterType').value !== 'all'" fxFlex class="mat-block" floatLabel="always">
+  <mat-form-field [class.!hidden]="navigationCardsWidgetSettingsForm.get('filterType').value === 'all'" class="mat-block flex-1" floatLabel="always">
     <mat-label translate>widgets.navigation.items</mat-label>
     <mat-chip-grid #filterItemsChipList>
       <mat-chip-row *ngFor="let filterItem of navigationCardsWidgetSettingsForm.get('filter').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
index 5271825ccf..c3528e8a2c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
@@ -32,7 +32,7 @@
     </tb-image-cards-select>
     <div class="tb-form-row space-between">
       <div>{{ (hasCenterValue ? 'widgets.wind-speed-direction.center-value' : 'widgets.wind-speed-direction.wind-direction') | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="centerValueFont"
                           [autoScale]="true"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetSettingsForm.get('centerValueColor').value?.color }"
@@ -63,8 +63,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 items-center justify-start gap-2">
+        <tb-font-settings [class.!hidden]="!majorTicksFontEnabled"
                           formControlName="majorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetSettingsForm.get('majorTicksColor').value }"
                           [autoScale]="true"
@@ -77,8 +77,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 items-center justify-start gap-2">
+        <tb-font-settings [class.!hidden]="!minorTicksFontEnabled"
                           formControlName="minorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetSettingsForm.get('minorTicksColor').value }"
                           [autoScale]="true"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html
index e0ad8ad69f..aea48ffcca 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html
@@ -17,17 +17,19 @@
 -->
 <div class="trip-animation-widget">
     <div class="trip-animation-label-container" *ngIf="settings.showLabel" [innerHTML]="label"></div>
-    <div class="trip-animation-container" fxLayout="column">
+    <div class="trip-animation-container flex flex-col">
         <div class="map" #map></div>
-        <div class="trip-animation-info-panel" fxLayout="row">
+        <div class="trip-animation-info-panel flex flex-row">
             <button class="tooltip-button" mat-mini-fab color="primary" aria-label="tooltip"
                 *ngIf="settings.showTooltip" (click)="visibleTooltip = !visibleTooltip">
                 <mat-icon>info_outline</mat-icon>
             </button>
         </div>
-        <div class="trip-animation-tooltip md-whiteframe-z4" fxLayout="column"
-             [ngClass]="{'trip-animation-tooltip-hidden':!visibleTooltip}"
-             [ngStyle]="{'background-color': settings.tooltipColor, 'opacity': settings.tooltipOpacity, 'color': settings.tooltipFontColor}">
+        <div class="trip-animation-tooltip md-whiteframe-z4 flex flex-col"
+             [class.trip-animation-tooltip-hidden]="!visibleTooltip"
+             [style.background-color]="settings.tooltipColor"
+             [style.opacity]="settings.tooltipOpacity"
+             [style.color]="settings.tooltipFontColor">
           <div *ngFor="let mainTooltip of mainTooltips"
                [innerHTML]="mainTooltip"
                style="padding: 10px 0">