From ae432ec9c5543b3029a1f3fdeee8e81197422e13 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 15 Oct 2024 11:51:08 +0300
Subject: [PATCH] UI: Remove flex layout in map widgets settings

---
 .../map/circle-settings.component.html        | 62 +++++++++----------
 .../map/common-map-settings.component.html    | 40 ++++++------
 ...atasources-key-autocomplete.component.html |  2 +-
 ...oogle-map-provider-settings.component.html |  4 +-
 .../here-map-provider-settings.component.html | 11 ++--
 ...image-map-provider-settings.component.html |  6 +-
 .../map/map-editor-settings.component.html    |  7 +--
 .../map/map-provider-settings.component.html  | 12 ++--
 .../settings/map/map-settings.component.html  |  4 +-
 .../marker-clustering-settings.component.html | 26 ++++----
 .../map/markers-settings.component.html       | 62 +++++++++----------
 ...treet-map-provider-settings.component.html | 11 ++--
 .../map/polygon-settings.component.html       | 62 +++++++++----------
 .../map/route-map-settings.component.html     |  6 +-
 ...ncent-map-provider-settings.component.html |  4 +-
 ...p-animation-common-settings.component.html | 27 ++++----
 ...p-animation-marker-settings.component.html | 30 +++++----
 ...rip-animation-path-settings.component.html | 42 ++++++-------
 ...ip-animation-point-settings.component.html | 27 ++++----
 19 files changed, 208 insertions(+), 237 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
index c159ec4684..d719c84e9c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
@@ -19,20 +19,18 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.maps.circle-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('showCircle').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="showCircle" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="showCircle" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.show-circle' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <tb-datasources-key-autocomplete fxFlex
-                                         required
+        <tb-datasources-key-autocomplete required
                                          [datasources]="widget?.config?.datasources"
                                          label="widgets.maps.circle-key-name"
                                          formControlName="circleKeyName">
@@ -43,14 +41,13 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.circle-label</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('showCircleLabel').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="showCircleLabel" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="showCircleLabel" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.show-circle-label' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
@@ -58,12 +55,12 @@
               <mat-slide-toggle formControlName="useCircleLabelFunction" class="slide-block">
                 {{ 'widgets.maps.use-circle-label-function' | translate }}
               </mat-slide-toggle>
-              <tb-html [fxShow]="!circleSettingsFormGroup.get('useCircleLabelFunction').value"
+              <tb-html [class.!hidden]="circleSettingsFormGroup.get('useCircleLabelFunction').value"
                        formControlName="circleLabel"
                        minHeight="100px"
                        label="{{ 'widgets.maps.circle-label-pattern' | translate }}">
               </tb-html>
-              <tb-js-func [fxShow]="circleSettingsFormGroup.get('useCircleLabelFunction').value"
+              <tb-js-func [class.!hidden]="!circleSettingsFormGroup.get('useCircleLabelFunction').value"
                           formControlName="circleLabelFunction"
                           [globalVariables]="functionScopeVariables"
                           [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -76,19 +73,18 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.circle-tooltip</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('showCircleTooltip').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="showCircleTooltip" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="showCircleTooltip" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.show-circle-tooltip' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
             <ng-template matExpansionPanelContent>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="flex-1">
                 <mat-label translate>widgets.maps.show-tooltip-action</mat-label>
                 <mat-select required formControlName="showCircleTooltipAction">
                   <mat-option *ngFor="let action of showTooltipActions" [value]="action">
@@ -102,12 +98,12 @@
               <mat-slide-toggle formControlName="useCircleTooltipFunction" class="slide-block">
                 {{ 'widgets.maps.use-circle-tooltip-function' | translate }}
               </mat-slide-toggle>
-              <tb-html [fxShow]="!circleSettingsFormGroup.get('useCircleTooltipFunction').value"
+              <tb-html [class.!hidden]="circleSettingsFormGroup.get('useCircleTooltipFunction').value"
                        formControlName="circleTooltipPattern"
                        minHeight="100px"
                        label="{{ 'widgets.maps.circle-tooltip-pattern' | translate }}">
               </tb-html>
-              <tb-js-func [fxShow]="circleSettingsFormGroup.get('useCircleTooltipFunction').value"
+              <tb-js-func [class.!hidden]="!circleSettingsFormGroup.get('useCircleTooltipFunction').value"
                           formControlName="circleTooltipFunction"
                           [globalVariables]="functionScopeVariables"
                           [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -119,27 +115,26 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.circle-fill-color</legend>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="circleFillColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.circle-fill-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.circle-fill-color-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="circleFillColorOpacity">
             </mat-form-field>
           </section>
           <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('useCircleFillColorFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="useCircleFillColorFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="useCircleFillColorFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-circle-fill-color-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
@@ -155,31 +150,30 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.circle-stroke</legend>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="circleStrokeColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.stroke-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.stroke-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="circleStrokeOpacity">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.stroke-weight</mat-label>
               <input matInput type="number" min="0" formControlName="circleStrokeWeight">
             </mat-form-field>
           </section>
           <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('useCircleStrokeColorFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="useCircleStrokeColorFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="useCircleStrokeColorFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-circle-stroke-color-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="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/map/common-map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
index baca5a60c7..3f9a83d819 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
@@ -18,30 +18,30 @@
 <section class="tb-widget-settings" [formGroup]="commonMapSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.common-map-settings</legend>
-    <section  fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <tb-datasources-key-autocomplete fxFlex
-                                       [fxShow]="provider === mapProvider.image"
+    <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <tb-datasources-key-autocomplete class="flex-1"
+                                       [class.!hidden]="provider !== mapProvider.image"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.x-pos-key-name"
                                        formControlName="xPosKeyName">
       </tb-datasources-key-autocomplete>
-      <tb-datasources-key-autocomplete fxFlex
-                                       [fxShow]="provider === mapProvider.image"
+      <tb-datasources-key-autocomplete class="flex-1"
+                                       [class.!hidden]="provider !== mapProvider.image"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.y-pos-key-name"
                                        formControlName="yPosKeyName">
       </tb-datasources-key-autocomplete>
-      <tb-datasources-key-autocomplete fxFlex
-                                       [fxShow]="provider !== mapProvider.image"
+      <tb-datasources-key-autocomplete class="flex-1"
+                                       [class.!hidden]="provider === mapProvider.image"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.latitude-key-name"
                                        formControlName="latKeyName">
       </tb-datasources-key-autocomplete>
-      <tb-datasources-key-autocomplete fxFlex
-                                       [fxShow]="provider !== mapProvider.image"
+      <tb-datasources-key-autocomplete class="flex-1"
+                                       [class.!hidden]="provider === mapProvider.image"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.longitude-key-name"
@@ -49,24 +49,24 @@
       </tb-datasources-key-autocomplete>
     </section>
     <mat-expansion-panel class="tb-settings">
-      <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-description fxLayoutAlign="end center" translate>
+      <mat-expansion-panel-header class="flex-wrap">
+        <mat-panel-description class="justify-end" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section [fxShow]="provider !== mapProvider.image" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-          <mat-form-field fxFlex class="mat-block">
+        <section [class.!hidden]="provider === mapProvider.image" class="flex flex-row xs:flex-col gt-xs:gap-2">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.default-map-zoom-level</mat-label>
             <input matInput type="number" min="0" max="20" step="1" formControlName="defaultZoomLevel">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.default-map-center-position</mat-label>
             <input matInput formControlName="defaultCenterPosition">
           </mat-form-field>
         </section>
-        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" style="margin-bottom: 15px;">
-          <section fxFlex fxLayout="column">
+        <section class="flex flex-row xs:flex-col gt-xs:gap-2 mb-3.5">
+          <section class="flex flex-col flex-1">
             <mat-slide-toggle formControlName="disableScrollZooming" class="slide-block">
               {{ 'widgets.maps.disable-scroll-zooming' | translate }}
             </mat-slide-toggle>
@@ -76,17 +76,17 @@
             <mat-slide-toggle formControlName="disableZoomControl" class="slide-block">
               {{ 'widgets.maps.disable-zoom-control-buttons' | translate }}
             </mat-slide-toggle>
-            <mat-slide-toggle [fxShow]="provider !== mapProvider.image" formControlName="fitMapBounds" class="slide-block">
+            <mat-slide-toggle [class.!hidden]="provider === mapProvider.image" formControlName="fitMapBounds" class="slide-block">
               {{ 'widgets.maps.fit-map-bounds' | translate }}
             </mat-slide-toggle>
           </section>
-          <section fxFlex fxLayout="column">
-            <mat-slide-toggle [fxShow]="provider !== mapProvider.image" formControlName="useDefaultCenterPosition" class="slide-block">
+          <section class="flex-1" [class.!hidden]="provider === mapProvider.image">
+            <mat-slide-toggle formControlName="useDefaultCenterPosition" class="slide-block">
               {{ 'widgets.maps.use-default-map-center-position' | translate }}
             </mat-slide-toggle>
           </section>
         </section>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block">
           <mat-label translate>widgets.maps.entities-limit</mat-label>
           <input matInput type="number" min="1" step="1" formControlName="mapPageSize">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/datasources-key-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/datasources-key-autocomplete.component.html
index eb1720c93c..610729d3fc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/datasources-key-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/datasources-key-autocomplete.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field fxFlex class="mat-block" [formGroup]="keyFormGroup">
+<mat-form-field class="mat-block" [formGroup]="keyFormGroup">
   <mat-label>{{ label | translate }}</mat-label>
   <input [required]="required" matInput
          type="text" placeholder="{{ 'entity.key-name' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/google-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/google-map-provider-settings.component.html
index c100862f6e..b97d84e9ad 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/google-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/google-map-provider-settings.component.html
@@ -16,11 +16,11 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.google-maps-api-key</mat-label>
     <input required matInput formControlName="gmApiKey">
   </mat-form-field>
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.default-map-type</mat-label>
     <mat-select required formControlName="gmDefaultMapType">
       <mat-option *ngFor="let type of googleMapTypes" [value]="type">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html
index a0e17883ce..4b7376c8b8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.map-layer</mat-label>
     <mat-select required formControlName="mapProviderHere">
       <mat-option *ngFor="let provider of hereMapProviders" [value]="provider">
@@ -30,19 +30,18 @@
       <mat-slide-toggle formControlName="useV3" style="margin-bottom: 16px;">
         {{ 'widgets.maps.here-use-new-version-api-3' | translate }}
       </mat-slide-toggle>
-      <div *ngIf="!providerSettingsFormGroup.get('credentials.useV3').value; else apiKey" fxLayout="row" fxLayoutGap="8px"
-        fxLayout.xs="column" fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div *ngIf="!providerSettingsFormGroup.get('credentials.useV3').value; else apiKey" class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="flex-1">
           <mat-label translate>widgets.maps.here-app-id</mat-label>
           <input required matInput formControlName="app_id">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="flex-1">
           <mat-label translate>widgets.maps.here-app-code</mat-label>
           <input required matInput formControlName="app_code">
         </mat-form-field>
       </div>
       <ng-template #apiKey>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field>
           <mat-label translate>widgets.maps.here-api-key</mat-label>
           <input required matInput formControlName="apiKey">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html
index 98d97f3414..0f3f9b9b01 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html
@@ -21,8 +21,8 @@
   </tb-gallery-image-input>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.image-map-background-from-entity-attribute</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="flex-1">
         <mat-label translate>widgets.maps.image-url-source-entity-alias</mat-label>
         <input matInput type="text"
                placeholder="{{ 'entity.entity-alias' | translate }}"
@@ -44,7 +44,7 @@
           </mat-option>
         </mat-autocomplete>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.image-url-source-entity-attribute</mat-label>
         <input matInput type="text"
                placeholder="{{ 'entity.key-name' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
index edea61f456..656e6c5d2c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
@@ -25,14 +25,13 @@
       {{ 'widgets.maps.init-draggable-mode' | translate }}
     </mat-slide-toggle>
     <mat-expansion-panel class="tb-settings" [expanded]="!mapEditorSettingsFormGroup.get('hideAllControlButton').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="hideAllControlButton" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="hideAllControlButton" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.hide-all-edit-buttons' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="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/map/map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.html
index 1fd1a5f249..4940d55205 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.map-provider-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field>
       <mat-label translate>widgets.maps.map-provider</mat-label>
       <mat-select required formControlName="provider">
         <mat-option *ngFor="let provider of mapProviders" [value]="provider">
@@ -27,24 +27,24 @@
       </mat-select>
     </mat-form-field>
     <tb-google-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.google"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.google"
       formControlName="googleProviderSettings">
     </tb-google-map-provider-settings>
     <tb-openstreet-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.openstreet"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.openstreet"
       formControlName="openstreetProviderSettings">
     </tb-openstreet-map-provider-settings>
     <tb-here-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.here"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.here"
       formControlName="hereProviderSettings">
     </tb-here-map-provider-settings>
     <tb-image-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.image"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.image"
       [aliasController]="aliasController"
       formControlName="imageMapProviderSettings">
     </tb-image-map-provider-settings>
     <tb-tencent-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.tencent"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.tencent"
       formControlName="tencentMapProviderSettings">
     </tb-tencent-map-provider-settings>
   </fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.html
index 1296bbf690..9f32a11d99 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.html
@@ -39,7 +39,7 @@
   </tb-circle-settings>
   <tb-marker-clustering-settings
     *ngIf="!routeMap"
-    [fxShow]="mapSettingsFormGroup.get('mapProviderSettings').value.provider !== mapProvider.image"
+    [class.!hidden]="mapSettingsFormGroup.get('mapProviderSettings').value.provider === mapProvider.image"
     formControlName="markerClusteringSettings">
   </tb-marker-clustering-settings>
   <tb-route-map-settings
@@ -47,7 +47,7 @@
     formControlName="routeMapSettings">
   </tb-route-map-settings>
   <tb-map-editor-settings
-    [fxShow]="displayEditorSettings()"
+    [class.!hidden]="!displayEditorSettings()"
     formControlName="mapEditorSettings">
   </tb-map-editor-settings>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
index fa641582b9..4a14c4d040 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
@@ -19,14 +19,13 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.maps.markers-clustering-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="markerClusteringSettingsFormGroup.get('useClusterMarkers').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="useClusterMarkers" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="useClusterMarkers" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.use-map-markers-clustering' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -34,21 +33,21 @@
         <mat-slide-toggle formControlName="zoomOnClick" class="slide-block">
           {{ 'widgets.maps.zoom-on-cluster-click' | translate }}
         </mat-slide-toggle>
-        <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="flex-1">
             <mat-label translate>widgets.maps.max-cluster-zoom</mat-label>
             <input matInput type="number" min="0" max="18" step="1" formControlName="maxZoom">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.max-cluster-radius-pixels</mat-label>
             <input matInput type="number" min="0" formControlName="maxClusterRadius">
           </mat-form-field>
         </section>
-        <section class="flex-gap-xs" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutGap.xs="16px">
-          <mat-slide-toggle fxFlex formControlName="animate" class="slide-block">
+        <section class="flex-gap-xs flex flex-col gt-xs:flex-row gap-2 xs:gap-4">
+          <mat-slide-toggle formControlName="animate" class="slide-block flex-1">
             {{ 'widgets.maps.cluster-zoom-animation' | translate }}
           </mat-slide-toggle>
-          <mat-slide-toggle fxFlex formControlName="showCoverageOnHover" class="slide-block">
+          <mat-slide-toggle formControlName="showCoverageOnHover" class="slide-block flex-1">
             {{ 'widgets.maps.show-markers-bounds-on-cluster-mouse-over' | translate }}
           </mat-slide-toggle>
         </section>
@@ -67,14 +66,13 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.clustering-markers</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="markerClusteringSettingsFormGroup.get('useIconCreateFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="useIconCreateFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="useIconCreateFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-icon-create-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="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/map/markers-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
index aed5dfc531..bd7eca8d02 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
@@ -18,17 +18,17 @@
 <section class="tb-widget-settings" [formGroup]="markersSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.markers-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="flex-1">
         <mat-label translate>widgets.maps.marker-offset-x</mat-label>
         <input matInput type="number" formControlName="markerOffsetX">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.marker-offset-y</mat-label>
         <input matInput type="number" formControlName="markerOffsetY">
       </mat-form-field>
     </section>
-    <tb-js-func [fxShow]="provider === mapProvider.image"
+    <tb-js-func [class.!hidden]="provider !== mapProvider.image"
                 formControlName="posFunction"
                 minHeight="100px"
                 [globalVariables]="functionScopeVariables"
@@ -42,14 +42,13 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.label</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="markersSettingsFormGroup.get('showLabel').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.show-label' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -57,12 +56,12 @@
           <mat-slide-toggle formControlName="useLabelFunction" class="slide-block">
             {{ 'widgets.maps.use-label-function' | translate }}
           </mat-slide-toggle>
-          <tb-html [fxShow]="!markersSettingsFormGroup.get('useLabelFunction').value"
+          <tb-html [class.!hidden]="markersSettingsFormGroup.get('useLabelFunction').value"
                    formControlName="label"
                    minHeight="100px"
                    label="{{ 'widgets.maps.label-pattern' | translate }}">
           </tb-html>
-          <tb-js-func [fxShow]="markersSettingsFormGroup.get('useLabelFunction').value"
+          <tb-js-func [class.!hidden]="!markersSettingsFormGroup.get('useLabelFunction').value"
                       formControlName="labelFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -75,19 +74,18 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.tooltip</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="markersSettingsFormGroup.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.show-tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block">
             <mat-label translate>widgets.maps.show-tooltip-action</mat-label>
             <mat-select required formControlName="showTooltipAction">
               <mat-option *ngFor="let action of showTooltipActions" [value]="action">
@@ -101,24 +99,24 @@
           <mat-slide-toggle formControlName="useTooltipFunction" class="slide-block">
             {{ 'widgets.maps.use-tooltip-function' | translate }}
           </mat-slide-toggle>
-          <tb-html [fxShow]="!markersSettingsFormGroup.get('useTooltipFunction').value"
+          <tb-html [class.!hidden]="markersSettingsFormGroup.get('useTooltipFunction').value"
                    formControlName="tooltipPattern"
                    minHeight="100px"
                    label="{{ 'widgets.maps.tooltip-pattern' | translate }}">
           </tb-html>
-          <tb-js-func [fxShow]="markersSettingsFormGroup.get('useTooltipFunction').value"
+          <tb-js-func [class.!hidden]="!markersSettingsFormGroup.get('useTooltipFunction').value"
                       formControlName="tooltipFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'dsData', 'dsIndex']"
                       functionTitle="{{ 'widgets.maps.tooltip-function' | translate }}"
                       helpId="widget/lib/map/tooltip_fn">
           </tb-js-func>
-          <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="flex-1">
               <mat-label translate>widgets.maps.tooltip-offset-x</mat-label>
               <input matInput type="number" formControlName="tooltipOffsetX">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.tooltip-offset-y</mat-label>
               <input matInput type="number" formControlName="tooltipOffsetY">
             </mat-form-field>
@@ -134,14 +132,13 @@
         label="{{ 'widgets.maps.color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
       <mat-expansion-panel class="tb-settings" [expanded]="markersSettingsFormGroup.get('useColorFunction').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.use-color-function' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -158,35 +155,34 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.marker-image</legend>
       <mat-expansion-panel class="tb-settings" expanded>
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.use-marker-image-function' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <tb-gallery-image-input [fxShow]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-gallery-image-input [class.!hidden]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
                           label="{{ 'widgets.maps.custom-marker-image' | translate }}"
                           formControlName="markerImage">
           </tb-gallery-image-input>
-          <mat-form-field [fxShow]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
-                          fxFlex class="mat-block">
+          <mat-form-field [class.!hidden]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
+                          class="mat-block">
             <mat-label translate>widgets.maps.custom-marker-image-size</mat-label>
             <input matInput type="number" min="1" formControlName="markerImageSize">
           </mat-form-field>
-          <tb-js-func [fxShow]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-js-func [class.!hidden]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
                       formControlName="markerImageFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'images', 'dsData', 'dsIndex']"
                       functionTitle="{{ 'widgets.maps.marker-image-function' | translate }}"
                       helpId="widget/lib/map/marker_image_fn">
           </tb-js-func>
-          <tb-multiple-gallery-image-input [fxShow]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-multiple-gallery-image-input [class.!hidden]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
                                            label="{{ 'widgets.maps.marker-images' | translate }}"
                                            formControlName="markerImages">
           </tb-multiple-gallery-image-input>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/openstreet-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/openstreet-map-provider-settings.component.html
index 9951c12bac..6633039e7d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/openstreet-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/openstreet-map-provider-settings.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.openstreet-provider</mat-label>
     <mat-select required formControlName="mapProvider">
       <mat-option *ngFor="let provider of mapProviders" [value]="provider">
@@ -25,19 +25,18 @@
     </mat-select>
   </mat-form-field>
   <mat-expansion-panel class="tb-settings" [expanded]="providerSettingsFormGroup.get('useCustomProvider').value">
-    <mat-expansion-panel-header fxLayout="row wrap">
+    <mat-expansion-panel-header class="flex-wrap">
       <mat-panel-title>
-        <mat-slide-toggle formControlName="useCustomProvider" (click)="$event.stopPropagation()"
-                          fxLayoutAlign="center">
+        <mat-slide-toggle formControlName="useCustomProvider" (click)="$event.stopPropagation()">
           {{ 'widgets.maps.use-custom-provider' | translate }}
         </mat-slide-toggle>
       </mat-panel-title>
-      <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+      <mat-panel-description class="justify-end xs:!hidden" translate>
         widget-config.advanced-settings
       </mat-panel-description>
     </mat-expansion-panel-header>
     <ng-template matExpansionPanelContent>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block">
         <mat-label translate>widgets.maps.custom-provider-tile-url</mat-label>
         <input required matInput formControlName="customProviderTileUrl">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
index 91984ca955..136c380d1a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
@@ -19,20 +19,18 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.maps.polygon-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('showPolygon').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="showPolygon" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="showPolygon" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.show-polygon' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <tb-datasources-key-autocomplete fxFlex
-                                         required
+        <tb-datasources-key-autocomplete required
                                          [datasources]="widget?.config?.datasources"
                                          label="widgets.maps.polygon-key-name"
                                          formControlName="polygonKeyName">
@@ -43,14 +41,13 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.polygon-label</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('showPolygonLabel').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="showPolygonLabel" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="showPolygonLabel" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.show-polygon-label' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
@@ -58,12 +55,12 @@
               <mat-slide-toggle formControlName="usePolygonLabelFunction" class="slide-block">
                 {{ 'widgets.maps.use-polygon-label-function' | translate }}
               </mat-slide-toggle>
-              <tb-html [fxShow]="!polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
+              <tb-html [class.!hidden]="polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
                        formControlName="polygonLabel"
                        minHeight="100px"
                        label="{{ 'widgets.maps.polygon-label-pattern' | translate }}">
               </tb-html>
-              <tb-js-func [fxShow]="polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
+              <tb-js-func [class.!hidden]="!polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
                           formControlName="polygonLabelFunction"
                           [globalVariables]="functionScopeVariables"
                           [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -76,19 +73,18 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.polygon-tooltip</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('showPolygonTooltip').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="showPolygonTooltip" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="showPolygonTooltip" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.show-polygon-tooltip' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
             <ng-template matExpansionPanelContent>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block">
                 <mat-label translate>widgets.maps.show-tooltip-action</mat-label>
                 <mat-select required formControlName="showPolygonTooltipAction">
                   <mat-option *ngFor="let action of showTooltipActions" [value]="action">
@@ -102,12 +98,12 @@
               <mat-slide-toggle formControlName="usePolygonTooltipFunction" class="slide-block">
                 {{ 'widgets.maps.use-polygon-tooltip-function' | translate }}
               </mat-slide-toggle>
-              <tb-html [fxShow]="!polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
+              <tb-html [class.!hidden]="polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
                        formControlName="polygonTooltipPattern"
                        minHeight="100px"
                        label="{{ 'widgets.maps.polygon-tooltip-pattern' | translate }}">
               </tb-html>
-              <tb-js-func [fxShow]="polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
+              <tb-js-func [class.!hidden]="!polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
                           formControlName="polygonTooltipFunction"
                           [globalVariables]="functionScopeVariables"
                           [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -119,27 +115,26 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.polygon-color</legend>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="polygonColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.polygon-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.polygon-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="polygonOpacity">
             </mat-form-field>
           </section>
           <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('usePolygonColorFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="usePolygonColorFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="usePolygonColorFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-polygon-color-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
@@ -155,31 +150,30 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.polygon-stroke</legend>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="polygonStrokeColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.stroke-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.stroke-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="polygonStrokeOpacity">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.stroke-weight</mat-label>
               <input matInput type="number" min="0" formControlName="polygonStrokeWeight">
             </mat-form-field>
           </section>
           <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('usePolygonStrokeColorFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="usePolygonStrokeColorFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="usePolygonStrokeColorFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-polygon-stroke-color-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="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/map/route-map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html
index 27f9b1dad7..4d4cec8cf4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html
@@ -18,12 +18,12 @@
 <section class="tb-widget-settings" [formGroup]="routeMapSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.route-map-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="flex-1">
         <mat-label translate>widgets.maps.stroke-weight</mat-label>
         <input matInput type="number" min="0" formControlName="strokeWeight">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.stroke-opacity</mat-label>
         <input matInput type="number" min="0" max="1" formControlName="strokeOpacity">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/tencent-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/tencent-map-provider-settings.component.html
index eeeb7ae7d4..cd8f10d242 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/tencent-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/tencent-map-provider-settings.component.html
@@ -16,11 +16,11 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.tencent-maps-api-key</mat-label>
     <input required matInput formControlName="tmApiKey">
   </mat-form-field>
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.default-map-type</mat-label>
     <mat-select required formControlName="tmDefaultMapType">
       <mat-option *ngFor="let type of tencentMapTypes" [value]="type">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html
index f3146aa7fd..d34fde33aa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html
@@ -18,18 +18,18 @@
 <section class="tb-widget-settings" [formGroup]="tripAnimationCommonSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.trip-animation-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block">
       <mat-label translate>widgets.maps.normalization-step</mat-label>
       <input matInput type="number" min="1" formControlName="normalizationStep">
     </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
-      <tb-datasources-key-autocomplete fxFlex
+    <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <tb-datasources-key-autocomplete class="flex-1"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.latitude-key-name"
                                        formControlName="latKeyName">
       </tb-datasources-key-autocomplete>
-      <tb-datasources-key-autocomplete fxFlex
+      <tb-datasources-key-autocomplete class="flex-1"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.longitude-key-name"
@@ -39,32 +39,31 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.tooltip</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationCommonSettingsFormGroup.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.show-tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+          <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="tooltipColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.tooltip-background-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="tooltipFontColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.tooltip-font-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.tooltip-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="tooltipOpacity">
             </mat-form-field>
@@ -75,12 +74,12 @@
           <mat-slide-toggle formControlName="useTooltipFunction" class="slide-block">
             {{ 'widgets.maps.use-tooltip-function' | translate }}
           </mat-slide-toggle>
-          <tb-html [fxShow]="!tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
+          <tb-html [class.!hidden]="tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
                    formControlName="tooltipPattern"
                    minHeight="100px"
                    label="{{ 'widgets.maps.tooltip-pattern' | translate }}">
           </tb-html>
-          <tb-js-func [fxShow]="tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
+          <tb-js-func [class.!hidden]="!tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
                       formControlName="tooltipFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'dsData', 'dsIndex']"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-marker-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-marker-settings.component.html
index 60557ee9e6..b9495b8a6a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-marker-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-marker-settings.component.html
@@ -18,21 +18,20 @@
 <section class="tb-widget-settings" [formGroup]="tripAnimationMarkerSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.markers-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block">
       <mat-label translate>widgets.maps.rotation-angle</mat-label>
       <input matInput type="number" min="0" max="360" formControlName="rotationAngle">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.label</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationMarkerSettingsFormGroup.get('showLabel').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.show-label' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -40,12 +39,12 @@
           <mat-slide-toggle formControlName="useLabelFunction" class="slide-block">
             {{ 'widgets.maps.use-label-function' | translate }}
           </mat-slide-toggle>
-          <tb-html [fxShow]="!tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
+          <tb-html [class.!hidden]="tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
                    formControlName="label"
                    minHeight="100px"
                    label="{{ 'widgets.maps.label-pattern' | translate }}">
           </tb-html>
-          <tb-js-func [fxShow]="tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
+          <tb-js-func [class.!hidden]="!tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
                       formControlName="labelFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -58,35 +57,34 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.marker-image</legend>
       <mat-expansion-panel class="tb-settings" expanded>
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.use-marker-image-function' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <tb-gallery-image-input [fxShow]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-gallery-image-input [class.!hidden]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
                           label="{{ 'widgets.maps.custom-marker-image' | translate }}"
                           formControlName="markerImage">
           </tb-gallery-image-input>
-          <mat-form-field [fxShow]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
-                          fxFlex class="mat-block">
+          <mat-form-field [class.!hidden]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
+                          class="mat-block">
             <mat-label translate>widgets.maps.custom-marker-image-size</mat-label>
             <input matInput type="number" min="1" formControlName="markerImageSize">
           </mat-form-field>
-          <tb-js-func [fxShow]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-js-func [class.!hidden]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
                       formControlName="markerImageFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'images', 'dsData', 'dsIndex']"
                       functionTitle="{{ 'widgets.maps.marker-image-function' | translate }}"
                       helpId="widget/lib/map/marker_image_fn">
           </tb-js-func>
-          <tb-multiple-gallery-image-input [fxShow]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-multiple-gallery-image-input [class.!hidden]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
                                            label="{{ 'widgets.maps.marker-images' | translate }}"
                                            formControlName="markerImages">
           </tb-multiple-gallery-image-input>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
index e7b0443208..f921677041 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
@@ -18,31 +18,30 @@
 <section class="tb-widget-settings" [formGroup]="tripAnimationPathSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.path-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+    <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
       <tb-color-input
-        fxFlex
+        class="flex-1"
         formControlName="color"
         icon="format_color_fill"
         label="{{ 'widgets.maps.path-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.stroke-weight</mat-label>
         <input matInput type="number" min="0" formControlName="strokeWeight">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.stroke-opacity</mat-label>
         <input matInput type="number" min="0" max="1" formControlName="strokeOpacity">
       </mat-form-field>
     </section>
     <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPathSettingsFormGroup.get('useColorFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.use-path-color-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -58,20 +57,19 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.path-decorator</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPathSettingsFormGroup.get('usePolylineDecorator').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="usePolylineDecorator" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="usePolylineDecorator" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.use-path-decorator' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="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="flex-1">
               <mat-label translate>widgets.maps.decorator-symbol</mat-label>
               <mat-select required formControlName="decoratorSymbol">
                 <mat-option *ngFor="let symbol of polylineDecoratorSymbols" [value]="symbol">
@@ -79,32 +77,32 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.decorator-symbol-size</mat-label>
               <input matInput type="number" min="1" formControlName="decoratorSymbolSize">
             </mat-form-field>
           </section>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-            <mat-slide-toggle fxFlex formControlName="useDecoratorCustomColor">
+          <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center">
+            <mat-slide-toggle class="flex-1" formControlName="useDecoratorCustomColor">
               {{ 'widgets.maps.use-path-decorator-custom-color' | translate }}
             </mat-slide-toggle>
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="decoratorCustomColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.decorator-custom-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
           </section>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="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="flex-1">
               <mat-label translate>widgets.maps.decorator-offset</mat-label>
               <input matInput formControlName="decoratorOffset">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.end-decorator-offset</mat-label>
               <input matInput formControlName="endDecoratorOffset">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.decorator-repeat</mat-label>
               <input matInput formControlName="decoratorRepeat">
             </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
index 2beba0639f..9e42753e34 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
@@ -19,39 +19,37 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.maps.points-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPointSettingsFormGroup.get('showPoints').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="showPoints" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="showPoints" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.show-points' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+        <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
           <tb-color-input
-            fxFlex
+            class="flex-1"
             formControlName="pointColor"
             icon="format_color_fill"
             label="{{ 'widgets.maps.point-color' | translate }}" openOnInput colorClearButton>
           </tb-color-input>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.point-size</mat-label>
             <input matInput type="number" min="1" formControlName="pointSize">
           </mat-form-field>
         </section>
         <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPointSettingsFormGroup.get('useColorPointFunction').value">
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex-wrap">
             <mat-panel-title>
-              <mat-slide-toggle formControlName="useColorPointFunction" (click)="$event.stopPropagation()"
-                                fxLayoutAlign="center">
+              <mat-slide-toggle formControlName="useColorPointFunction" (click)="$event.stopPropagation()">
                 {{ 'widgets.maps.use-point-color-function' | translate }}
               </mat-slide-toggle>
             </mat-panel-title>
-            <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+            <mat-panel-description class="justify-end xs:!hidden" translate>
               widget-config.advanced-settings
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -65,14 +63,13 @@
           </ng-template>
         </mat-expansion-panel>
         <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPointSettingsFormGroup.get('usePointAsAnchor').value">
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex-wrap">
             <mat-panel-title>
-              <mat-slide-toggle formControlName="usePointAsAnchor" (click)="$event.stopPropagation()"
-                                fxLayoutAlign="center">
+              <mat-slide-toggle formControlName="usePointAsAnchor" (click)="$event.stopPropagation()">
                 {{ 'widgets.maps.use-point-as-anchor' | translate }}
               </mat-slide-toggle>
             </mat-panel-title>
-            <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+            <mat-panel-description class="justify-end xs:!hidden" translate>
               widget-config.advanced-settings
             </mat-panel-description>
           </mat-expansion-panel-header>