From 2e807f319da5bb42055bf71013aba12298c17d5b Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Tue, 7 Mar 2023 16:03:14 +0200
Subject: [PATCH 1/9] UI: Fixed form style

---
 .../vc/repository-settings.component.html     |  8 ++---
 .../vc/repository-settings.component.scss     |  3 --
 ...ities-table-widget-settings.component.html |  2 +-
 .../cards/label-widget-label.component.html   |  2 +-
 ...ghnut-chart-widget-settings.component.html |  2 +-
 .../flot-pie-widget-settings.component.html   |  2 +-
 .../common/widget-font.component.html         |  6 ++--
 ...nob-control-widget-settings.component.html |  2 +-
 ...stent-table-widget-settings.component.html |  2 +-
 .../control/rpc-button-style.component.html   |  2 +-
 ...lide-toggle-widget-settings.component.html |  2 +-
 ...gue-compass-widget-settings.component.html |  6 ++--
 ...logue-gauge-widget-settings.component.html | 22 +++++++-------
 ...gital-gauge-widget-settings.component.html |  6 ++--
 .../gauge/gauge-highlight.component.html      |  2 +-
 .../settings/gpio/gpio-item.component.html    |  4 +--
 ...n-attribute-widget-settings.component.html |  2 +-
 ...e-attribute-widget-settings.component.html |  2 +-
 ...r-attribute-widget-settings.component.html |  2 +-
 ...n-attribute-widget-settings.component.html |  2 +-
 ...n-attribute-widget-settings.component.html |  4 +--
 ...-attributes-widget-settings.component.html |  2 +-
 ...g-attribute-widget-settings.component.html |  2 +-
 .../map/common-map-settings.component.html    |  6 ++--
 .../marker-clustering-settings.component.html |  2 +-
 .../map/markers-settings.component.html       |  4 +--
 .../map/route-map-settings.component.html     |  2 +-
 .../widget/widget-config.component.html       | 29 +++++++++----------
 .../dashboard/dashboard-form.component.html   |  4 +--
 .../app/shared/components/html.component.html |  2 +-
 .../components/image-input.component.scss     |  1 +
 .../shared/components/js-func.component.html  |  2 +-
 .../components/markdown-editor.component.html |  2 +-
 .../components/markdown-editor.component.scss |  2 +-
 ui-ngx/src/styles.scss                        |  3 +-
 35 files changed, 73 insertions(+), 75 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
index 8a6c551359..08038ede7f 100644
--- a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
@@ -41,10 +41,10 @@
             <mat-label translate>admin.default-branch</mat-label>
             <input matInput formControlName="defaultBranch">
           </mat-form-field>
-          <mat-checkbox formControlName="readOnly">
-            {{ 'admin.repository-read-only' | translate }}
-          </mat-checkbox>
-          <div>
+          <div fxLayout="column">
+            <mat-checkbox formControlName="readOnly">
+              {{ 'admin.repository-read-only' | translate }}
+            </mat-checkbox>
             <mat-checkbox formControlName="showMergeCommits">
               {{ 'admin.show-merge-commits' | translate }}
             </mat-checkbox>
diff --git a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.scss b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.scss
index a45a4cbfc1..80df7d9d79 100644
--- a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.scss
+++ b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.scss
@@ -17,9 +17,6 @@
   .mat-mdc-card.repository-settings {
     margin: 8px;
   }
-  .mat-mdc-checkbox {
-    padding-bottom: 16px;
-  }
   .fields-group {
     padding: 0 16px 8px;
     margin-bottom: 10px;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html
index 3091ac7bc6..c0680dfeb9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html
@@ -51,7 +51,7 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <section fxLayout="column" fxLayoutGap="8px">
+    <section fxLayout="column" fxLayoutGap.gt-xs="8px">
       <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
         <mat-slide-toggle fxFlex formControlName="displayEntityName">
           {{ 'widgets.table.display-entity-name' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
index ff6b2f6bdc..743ecbf8bb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
@@ -47,7 +47,7 @@
         </mat-form-field>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.label-widget.label-position</legend>
-          <section fxLayout="row" fxLayoutGap="8px">
+          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
             <mat-form-field fxFlex>
               <mat-label translate>widgets.label-widget.x-pos</mat-label>
               <input matInput type="number" min="0" max="100" formControlName="x">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
index c1f5a26cf1..6f56ee9ecd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
@@ -24,7 +24,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.border-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.chart.border-width</mat-label>
         <input matInput type="number" min="0" formControlName="borderWidth">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
index e860995acf..307a494954 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
@@ -41,7 +41,7 @@
   </fieldset>
   <fieldset class="fields-group" formGroupName="stroke">
     <legend class="group-title" translate>widgets.chart.stroke-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.chart.width-pixels</mat-label>
         <input matInput type="number" min="0" formControlName="width">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
index 6ec910fa08..1fa1aacd92 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="widgetFontFormGroup" fxLayout="column">
-  <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+  <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
     <mat-form-field fxFlex class="mat-block">
       <mat-label translate>widgets.widget-font.font-family</mat-label>
       <input matInput formControlName="family">
@@ -26,7 +26,7 @@
       <input matInput type="number" min="1" step="1" formControlName="size">
     </mat-form-field>
   </section>
-  <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+  <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
     <mat-form-field fxFlex class="mat-block">
       <mat-label translate>widgets.widget-font.font-style</mat-label>
       <mat-select formControlName="style">
@@ -68,7 +68,7 @@
       </mat-select>
     </mat-form-field>
   </section>
-  <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
+  <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
     <tb-color-input
       fxFlex
       formControlName="color"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
index ef06cde259..2a1bc2d090 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
@@ -29,7 +29,7 @@
       <mat-label translate>widgets.rpc.initial-value</mat-label>
       <input matInput type="number" formControlName="initialValue">
     </mat-form-field>
-    <section fxLayout="row" fxLayoutGap="8px">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.rpc.min-value</mat-label>
         <input required matInput type="number" formControlName="minValue">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
index 5db8315329..34105fa0e9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
@@ -33,7 +33,7 @@
         </mat-checkbox>
       </section>
     </section>
-    <section fxLayout="column" fxLayoutGap="8px">
+    <section fxLayout="column" fxLayoutGap.gt-xs="8px">
       <mat-slide-toggle fxFlex formControlName="displayDetails">
         {{ 'widgets.persistent-table.display-request-details' | translate }}
       </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
index 3e330e78ac..74e782c901 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
@@ -24,7 +24,7 @@
     <mat-slide-toggle formControlName="isPrimary" class="slide-block">
       {{ 'widgets.rpc.button-primary' | translate }}
     </mat-slide-toggle>
-    <section fxLayout="row wrap" fxLayoutGap="8px">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <tb-color-input fxFlex
                       formControlName="textColor"
                       icon="format_color_fill"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
index 41f53398ae..8d7f4243b4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
@@ -22,7 +22,7 @@
       <mat-label translate>widgets.rpc.slide-toggle-label</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <section fxLayout="row" fxLayoutGap="8px">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.rpc.label-position</mat-label>
         <mat-select formControlName="labelPosition">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
index 0de8aabd0a..bbb7874523 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
@@ -42,7 +42,7 @@
                     icon="format_color_fill"
                     label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.gauge.minor-ticks-count</mat-label>
         <input matInput type="number" min="0" formControlName="minorTicks">
@@ -71,7 +71,7 @@
     <mat-slide-toggle formControlName="showBorder" class="slide-block">
       {{ 'widgets.gauge.show-plate-border' | translate }}
     </mat-slide-toggle>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <tb-color-input fxFlex
                       formControlName="colorBorder"
                       icon="format_color_fill"
@@ -89,7 +89,7 @@
       <mat-label translate>widgets.gauge.needle-circle-size</mat-label>
       <input matInput type="number" min="0" formControlName="needleCircleSize">
     </mat-form-field>
-    <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <tb-color-input fxFlex
                       formControlName="colorNeedle"
                       icon="format_color_fill"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
index ff42fd9004..c2264d7aca 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
@@ -31,7 +31,7 @@
   </tb-color-input>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gauge.ticks-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.gauge.min-value</mat-label>
         <input matInput type="number" formControlName="minValue">
@@ -41,7 +41,7 @@
         <input matInput type="number" formControlName="maxValue">
       </mat-form-field>
     </section>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="0px" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.gauge.major-ticks-count</mat-label>
         <input matInput type="number" min="0" formControlName="majorTicksCount">
@@ -52,7 +52,7 @@
                       label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="0px" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.gauge.minor-ticks-count</mat-label>
         <input matInput type="number" min="0" formControlName="minorTicks">
@@ -127,7 +127,7 @@
             <legend class="group-title" translate>widgets.gauge.value-font</legend>
             <tb-widget-font formControlName="valueFont" [hasShadowColor]="true"></tb-widget-font>
           </fieldset>
-          <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
             <tb-color-input fxFlex
                             formControlName="colorValueBoxRect"
                             icon="format_color_fill"
@@ -139,7 +139,7 @@
                             label="{{ 'widgets.gauge.value-box-rect-stroke-color-end' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
           </section>
-          <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
             <tb-color-input fxFlex
                             formControlName="colorValueBoxBackground"
                             icon="format_color_fill"
@@ -168,7 +168,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gauge.needle-settings</legend>
-    <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <tb-color-input fxFlex
                       formControlName="colorNeedle"
                       icon="format_color_fill"
@@ -180,7 +180,7 @@
                       label="{{ 'widgets.gauge.needle-color-end' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
-    <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section  fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <tb-color-input fxFlex
                       formControlName="colorNeedleShadowUp"
                       icon="format_color_fill"
@@ -294,7 +294,7 @@
 <ng-template #radialGauge let-settingsForm="settingsForm">
   <fieldset class="fields-group" [formGroup]="settingsForm">
     <legend class="group-title" translate>widgets.gauge.radial-gauge-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section  fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.gauge.start-ticks-angle</mat-label>
         <input matInput type="number" min="0" max="360" formControlName="startAngle">
@@ -314,7 +314,7 @@
 <ng-template #linearGauge let-settingsForm="settingsForm">
   <fieldset class="fields-group" [formGroup]="settingsForm">
     <legend class="group-title" translate>widgets.gauge.linear-gauge-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.gauge.bar-stroke-width</mat-label>
         <input matInput type="number" min="0" formControlName="barStrokeWidth">
@@ -325,7 +325,7 @@
                       label="{{ 'widgets.gauge.bar-stroke-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
-    <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <tb-color-input fxFlex
                       formControlName="colorBar"
                       icon="format_color_fill"
@@ -337,7 +337,7 @@
                       label="{{ 'widgets.gauge.bar-background-color-end' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
-    <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <tb-color-input fxFlex
                       formControlName="colorBarProgress"
                       icon="format_color_fill"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
index b4b2e744a1..9d37dd6f00 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="digitalGaugeWidgetSettingsForm" fxLayout="column">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gauge.common-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.gauge.min-value</mat-label>
         <input matInput type="number" formControlName="minValue">
@@ -182,7 +182,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gauge.unit-title-and-timestamp-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-slide-toggle fxFlex formControlName="showUnitTitle">
         {{ 'widgets.gauge.show-unit-title' | translate }}
       </mat-slide-toggle>
@@ -191,7 +191,7 @@
         <input matInput formControlName="unitTitle">
       </mat-form-field>
     </section>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-slide-toggle fxFlex formControlName="showTimestamp">
         {{ 'widgets.gauge.show-timestamp' | translate }}
       </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html
index d03f7dc8a1..f92edfcde5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html
@@ -40,7 +40,7 @@
     <div fxLayout="column" fxLayoutGap="0.5em">
       <mat-divider></mat-divider>
       <section class="tb-widget-settings" fxLayout="column">
-        <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
           <mat-form-field fxFlex>
             <mat-label translate>widgets.gauge.highlight-from</mat-label>
             <input matInput type="number" formControlName="from">
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 472b52555c..9264b82b3e 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
@@ -45,7 +45,7 @@
     <div fxLayout="column" fxLayoutGap="0.5em">
       <mat-divider></mat-divider>
       <section class="tb-widget-settings" fxLayout="column">
-        <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
           <mat-form-field fxFlex class="mat-block">
             <mat-label translate>widgets.gpio.pin</mat-label>
             <input required matInput type="number" min="1" step="1" formControlName="pin">
@@ -55,7 +55,7 @@
             <input required matInput formControlName="label">
           </mat-form-field>
         </section>
-        <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
           <mat-form-field fxFlex class="mat-block">
             <mat-label translate>widgets.gpio.row</mat-label>
             <input required matInput type="number" min="0" step="1" formControlName="row">
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 f23924c9be..a91f3af9a5 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
@@ -28,7 +28,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.checkbox-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.true-label</mat-label>
         <input matInput formControlName="trueValue">
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 19b695c4b1..512ccc9f8f 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
@@ -21,7 +21,7 @@
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.double-field-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input matInput type="number" step="any" formControlName="minValue">
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 1ec19405bb..d5ab9c976d 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
@@ -21,7 +21,7 @@
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.integer-field-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input matInput type="number" step="1" formControlName="minValue">
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 a80ab4e6e9..732b98dc05 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
@@ -37,7 +37,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.attribute-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.widget-mode</mat-label>
         <mat-select formControlName="widgetMode">
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 0344b51d32..f02f840645 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
@@ -25,7 +25,7 @@
     <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.latitude-key-name</mat-label>
         <input matInput formControlName="latKeyName">
@@ -47,7 +47,7 @@
     <mat-slide-toggle formControlName="showLabel" class="slide-block">
       {{ 'widgets.input-widgets.show-label' | translate }}
     </mat-slide-toggle>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.latitude-label</mat-label>
         <input matInput formControlName="latLabel">
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 f6239b3e61..9c250e5968 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
@@ -45,7 +45,7 @@
           <mat-checkbox formControlName="updateAllValues" style="margin-bottom: 8px;">
             {{ 'widgets.input-widgets.update-all-values' | translate }}
           </mat-checkbox>
-          <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
             <mat-form-field fxFlex class="mat-block">
               <mat-label translate>widgets.input-widgets.save-button-label</mat-label>
               <input matInput formControlName="saveButtonLabel">
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 2b0f1b4599..53ea6b67c9 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
@@ -21,7 +21,7 @@
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.text-field-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.input-widgets.min-length</mat-label>
         <input matInput type="number" step="1" min="0" formControlName="minLength">
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 8f9269690e..41648b5168 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,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="commonMapSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.common-map-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+    <section  fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <tb-datasources-key-autocomplete fxFlex
                                        [fxShow]="provider === mapProvider.image"
                                        required
@@ -55,7 +55,7 @@
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section [fxShow]="provider !== mapProvider.image" fxLayout="row" fxLayoutGap="8px">
+        <section [fxShow]="provider !== mapProvider.image" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
           <mat-form-field fxFlex class="mat-block">
             <mat-label translate>widgets.maps.default-map-zoom-level</mat-label>
             <input matInput type="number" min="0" max="20" step="1" formControlName="defaultZoomLevel">
@@ -65,7 +65,7 @@
             <input matInput formControlName="defaultCenterPosition">
           </mat-form-field>
         </section>
-        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" style="margin-bottom: 15px;">
+        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" style="margin-bottom: 15px;">
           <section fxFlex fxLayout="column">
             <mat-slide-toggle formControlName="disableScrollZooming" class="slide-block">
               {{ 'widgets.maps.disable-scroll-zooming' | translate }}
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 49dfc84c5a..403721f65c 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
@@ -34,7 +34,7 @@
         <mat-slide-toggle formControlName="zoomOnClick" class="slide-block">
           {{ 'widgets.maps.zoom-on-cluster-click' | translate }}
         </mat-slide-toggle>
-        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
           <mat-form-field fxFlex class="mat-block">
             <mat-label translate>widgets.maps.max-cluster-zoom</mat-label>
             <input matInput type="number" min="0" max="18" step="1" formControlName="maxZoom">
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 c1445a867d..2b5de971b5 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,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="markersSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.markers-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.maps.marker-offset-x</mat-label>
         <input matInput type="number" formControlName="markerOffsetX">
@@ -113,7 +113,7 @@
                       functionTitle="{{ 'widgets.maps.tooltip-function' | translate }}"
                       helpId="widget/lib/map/tooltip_fn">
           </tb-js-func>
-          <section  fxLayout="row" fxLayoutGap="8px">
+          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
             <mat-form-field fxFlex class="mat-block">
               <mat-label translate>widgets.maps.tooltip-offset-x</mat-label>
               <input matInput type="number" formControlName="tooltipOffsetX">
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 9e7756d092..a22ce3e37e 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,7 +18,7 @@
 <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" fxLayoutGap="8px">
+    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.maps.stroke-weight</mat-label>
         <input matInput type="number" min="0" formControlName="strokeWeight">
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 0b4c433bef..aea23a4e4c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -19,8 +19,8 @@
   <mat-tab label="{{ 'widget-config.data' | translate }}" *ngIf="widgetType !== widgetTypes.static">
     <div [formGroup]="dataSettings" class="mat-content mat-padding" fxLayout="column" fxLayoutGap="8px">
       <div *ngIf="displayTimewindowConfig()" fxFlex="100"
-           fxLayout.xs="column" fxLayoutGap="8px" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center">
-        <div fxLayout="column" fxLayoutGap="8px" fxFlex.gt-xs>
+           fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxFlex.gt-xs>
           <mat-checkbox formControlName="useDashboardTimewindow">
             {{ 'widget-config.use-dashboard-timewindow' | translate }}
           </mat-checkbox>
@@ -29,7 +29,7 @@
           </mat-checkbox>
         </div>
         <section fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-lg="column" fxLayoutAlign.lt-lg="center start"
-                 fxFlex.gt-xs style="margin-bottom: 16px;">
+                 fxFlex.gt-xs>
           <span [ngClass]="{'tb-disabled-label': dataSettings.get('useDashboardTimewindow').value}" translate
                 style="padding-right: 8px;">widget-config.timewindow</span>
           <tb-timewindow asButton="true"
@@ -43,7 +43,7 @@
       </div>
       <div *ngIf="widgetType === widgetTypes.alarm" fxLayout="column" fxLayoutAlign="center">
         <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
-             fxLayoutGap="8px">
+             fxLayoutGap.gt-xs="8px">
           <mat-form-field fxFlex class="mat-block" floatLabel="always">
             <mat-label translate>alarm.alarm-status-list</mat-label>
             <mat-select formControlName="alarmStatusList" multiple
@@ -63,8 +63,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
-             fxLayoutGap="8px">
+        <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center">
           <mat-form-field fxFlex class="mat-block" floatLabel="always">
             <mat-label translate>alarm.alarm-type-list</mat-label>
             <mat-chip-grid #alarmTypeChipList formControlName="alarmTypeList">
@@ -355,7 +354,7 @@
           <mat-slide-toggle class="mat-slide" formControlName="showTitle">
             {{ 'widget-config.display-title' | translate }}
           </mat-slide-toggle>
-          <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px">
+          <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px">
             <mat-form-field fxFlex>
               <mat-label translate>widget-config.title</mat-label>
               <input matInput formControlName="title">
@@ -365,12 +364,12 @@
               <input matInput formControlName="titleTooltip">
             </mat-form-field>
           </div>
-          <fieldset class="fields-group" fxLayoutGap="8px" style="margin: 0">
+          <fieldset class="fields-group" fxLayoutGap.gt-xs="8px" style="margin: 0">
             <legend class="group-title" translate>widget-config.title-icon</legend>
             <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
               {{ 'widget-config.display-icon' | translate }}
             </mat-slide-toggle>
-            <div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="8px">
+            <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px">
               <tb-material-icon-select fxFlex
                                        formControlName="titleIcon">
               </tb-material-icon-select>
@@ -404,8 +403,8 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widget-config.widget-style</legend>
-          <div fxLayout="column" fxLayout.gt-md="row wrap" fxFlex fxLayoutGap="8px" class="tb-widget-style">
-            <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" fxFlex>
+          <div fxLayout="column" fxLayout.gt-md="row wrap" fxFlex fxLayoutGap.gt-xs="8px" class="tb-widget-style">
+            <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex>
               <tb-color-input fxFlex
                               label="{{'widget-config.background-color' | translate}}"
                               icon="format_color_fill"
@@ -419,7 +418,7 @@
                               formControlName="color">
               </tb-color-input>
             </div>
-            <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" fxFlex>
+            <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex>
               <mat-form-field fxFlex>
                 <mat-label translate>widget-config.padding</mat-label>
                 <input matInput formControlName="padding">
@@ -477,8 +476,8 @@
         <fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider">
           <legend class="group-title" translate>widget-config.mobile-mode-settings</legend>
           <mat-expansion-panel class="tb-settings">
-            <mat-expansion-panel-header>
-              <mat-panel-title fxLayout.xs="column" fxLayoutAlign.xs="center start" fxLayout="row" fxLayoutGap="8px" fxFlex="70">
+            <mat-expansion-panel-header style="height: 100%;">
+              <mat-panel-title fxLayout.xs="column" fxLayoutAlign.xs="center start" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex="70">
                 <mat-slide-toggle formControlName="mobileHide" (click)="$event.stopPropagation()" fxLayoutAlign="center">
                   {{ 'widget-config.mobile-hide' | translate }}
                 </mat-slide-toggle>
@@ -491,7 +490,7 @@
               </mat-panel-description>
             </mat-expansion-panel-header>
             <ng-template matExpansionPanelContent>
-              <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" fxFlex>
+              <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex>
                 <mat-form-field fxFlex>
                   <mat-label translate>widget-config.order</mat-label>
                   <input matInput formControlName="mobileOrder" type="number" step="1">
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
index 61367ab02f..3514b0d919 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
@@ -124,13 +124,13 @@
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
       </div>
-      <div style="padding-bottom: 16px;" translate>dashboard.mobile-app-settings</div>
+      <div translate>dashboard.mobile-app-settings</div>
       <tb-image-input fxFlex
                       label="{{'dashboard.image' | translate}}"
                       maxSizeByte="524288"
                       formControlName="image">
       </tb-image-input>
-      <mat-checkbox fxFlex formControlName="mobileHide" style="padding-bottom: 16px; padding-top: 16px;">
+      <mat-checkbox fxFlex formControlName="mobileHide">
         {{ 'dashboard.mobile-hide' | translate }}
       </mat-checkbox>
       <mat-form-field class="mat-block">
diff --git a/ui-ngx/src/app/shared/components/html.component.html b/ui-ngx/src/app/shared/components/html.component.html
index e83c18ba96..07a2a7397c 100644
--- a/ui-ngx/src/app/shared/components/html.component.html
+++ b/ui-ngx/src/app/shared/components/html.component.html
@@ -18,7 +18,7 @@
 <div class="tb-html" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight}"
      tb-fullscreen
      [fullscreen]="fullscreen" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="tb-html-toolbar">
+  <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="tb-html-toolbar">
     <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
     <span fxFlex></span>
     <button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyHtml()">
diff --git a/ui-ngx/src/app/shared/components/image-input.component.scss b/ui-ngx/src/app/shared/components/image-input.component.scss
index 0f559d129a..0cdfce9e27 100644
--- a/ui-ngx/src/app/shared/components/image-input.component.scss
+++ b/ui-ngx/src/app/shared/components/image-input.component.scss
@@ -23,6 +23,7 @@ $previewSize: 96px !default;
 
   .tb-container {
     margin-top: 0;
+    padding: 0;
     label.tb-title {
       display: block;
       padding-bottom: 8px;
diff --git a/ui-ngx/src/app/shared/components/js-func.component.html b/ui-ngx/src/app/shared/components/js-func.component.html
index d3b4d4a997..23ebd76918 100644
--- a/ui-ngx/src/app/shared/components/js-func.component.html
+++ b/ui-ngx/src/app/shared/components/js-func.component.html
@@ -18,7 +18,7 @@
 <div class="tb-js-func" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight, 'tb-js-func-title': functionTitle}"
      tb-fullscreen
      [fullscreen]="fullscreen" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="tb-js-func-toolbar">
+  <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="tb-js-func-toolbar">
     <label *ngIf="functionTitle" class="tb-title no-padding"
            [ngClass]="{'tb-error': !disabled && (hasErrors || !functionValid || required && !modelValue), 'tb-required': !disabled && required}">{{functionTitle + ': f(' + functionArgsString + ')' }}</label>
     <label *ngIf="!functionTitle" class="tb-title no-padding"
diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.html b/ui-ngx/src/app/shared/components/markdown-editor.component.html
index b1e00d8345..f2d2ab77de 100644
--- a/ui-ngx/src/app/shared/components/markdown-editor.component.html
+++ b/ui-ngx/src/app/shared/components/markdown-editor.component.html
@@ -17,7 +17,7 @@
 -->
 <div class="markdown-content" [ngClass]="{'tb-edit-mode': !readonly}"
      tb-fullscreen [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
-  <div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="markdown-editor-toolbar">
+  <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="markdown-editor-toolbar">
     <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && required && !markdownValue, 'tb-required': !disabled && required}">{{ label }}</label>
     <span fxFlex></span>
     <button [fxShow]="!editorMode"
diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.scss b/ui-ngx/src/app/shared/components/markdown-editor.component.scss
index bd8eb26a2e..e8153a1879 100644
--- a/ui-ngx/src/app/shared/components/markdown-editor.component.scss
+++ b/ui-ngx/src/app/shared/components/markdown-editor.component.scss
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 .markdown-content {
-  min-width: 400px;
+  min-width: 300px;
   &.tb-edit-mode {
     .tb-markdown-view-container {
       border: 1px solid #c0c0c0;
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 6aee1dbdaf..30bb7517e5 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -1486,7 +1486,8 @@ mat-label {
   }
 
   @media #{$mat-lt-md} {
-    .mat-mdc-form-field {
+    .mat-mdc-form-field.mat-mdc-form-field-has-icon-suffix,
+    .mat-mdc-form-field.mat-mdc-form-field-has-icon-prefix{
       .mat-mdc-form-field-infix {
         width: auto;
       }

From dd75ae23b53f0ba5d7c4941683fea321d5f2cf0d Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 10 Mar 2023 15:56:22 +0200
Subject: [PATCH 2/9] UI: fixed VC

---
 .../home/components/vc/repository-settings.component.html  | 6 ++++--
 ui-ngx/src/styles.scss                                     | 7 +++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
index 08038ede7f..b6fd7ad214 100644
--- a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
@@ -15,8 +15,10 @@
     limitations under the License.
 
 -->
-<div>
-  <mat-card appearance="outlined" class="repository-settings" [ngClass]="{'settings-card': !detailsMode}" [ngStyle]="popoverComponent ? {boxShadow: 'none', width: '800px'} : {}">
+<div style="height: min-content; max-height: 80vh;">
+  <mat-card appearance="outlined" class="repository-settings"
+            [ngClass]="{'settings-card': !detailsMode}"
+            [ngStyle]="popoverComponent ? {boxShadow: 'none', maxWidth: '100%', minWidth: '100%', width: '800px'} : {}">
     <mat-card-header>
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.repository-settings</span>
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 30bb7517e5..64342a686a 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -164,6 +164,10 @@ fieldset {
   border: none;
 }
 
+.fields-group {
+  display: grid;
+}
+
 section.tb-header-buttons {
   position: absolute;
   top: 86px;
@@ -1486,8 +1490,7 @@ mat-label {
   }
 
   @media #{$mat-lt-md} {
-    .mat-mdc-form-field.mat-mdc-form-field-has-icon-suffix,
-    .mat-mdc-form-field.mat-mdc-form-field-has-icon-prefix{
+    .mat-mdc-form-field {
       .mat-mdc-form-field-infix {
         width: auto;
       }

From 8c64b76b14e145a72364ecab340dff5ebe9f7d2a Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 15 Mar 2023 12:06:47 +0200
Subject: [PATCH 3/9] UI: fix ui

---
 .../profile/alarm/device-profile-alarm.component.html     | 8 ++++----
 .../device-profile-provision-configuration.component.html | 4 ++--
 ...-device-profile-transport-configuration.component.html | 8 ++++----
 .../widget/lib/display-columns-panel.component.html       | 2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
index a7264483f3..d8c9c081f6 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
@@ -59,10 +59,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <mat-checkbox formControlName="propagate" style="display: block; padding-bottom: 16px;">
+        <mat-checkbox formControlName="propagate" style="display: block;">
           {{ 'device-profile.propagate-alarm' | translate }}
         </mat-checkbox>
-        <section *ngIf="alarmFormGroup.get('propagate').value === true" style="padding-bottom: 1em;">
+        <section *ngIf="alarmFormGroup.get('propagate').value === true">
           <mat-form-field floatLabel="always" class="mat-block">
             <mat-label translate>device-profile.alarm-rule-relation-types-list</mat-label>
             <mat-chip-grid #relationTypesChipList [disabled]="disabled">
@@ -82,10 +82,10 @@
             <mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
           </mat-form-field>
         </section>
-        <mat-checkbox formControlName="propagateToOwner" style="display: block; padding-bottom: 16px;">
+        <mat-checkbox formControlName="propagateToOwner" style="display: block;">
           {{ 'device-profile.propagate-alarm-to-owner' | translate }}
         </mat-checkbox>
-        <mat-checkbox formControlName="propagateToTenant" style="display: block; padding-bottom: 16px;">
+        <mat-checkbox formControlName="propagateToTenant" style="display: block;">
           {{ 'device-profile.propagate-alarm-to-tenant' | translate }}
         </mat-checkbox>
       </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
index b588a5ec34..cd711f9e12 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
@@ -31,7 +31,7 @@
     <mat-form-field fxFlex class="mat-block">
       <mat-label translate>device-profile.provision-device-key</mat-label>
       <input matInput formControlName="provisionDeviceKey" required/>
-      <button mat-button matSuffix mat-icon-button
+      <button matSuffix mat-icon-button
               ngxClipboard
               [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceKey').value"
               (cbOnSuccess)="onProvisionCopied(true)"
@@ -46,7 +46,7 @@
     <mat-form-field fxFlex class="mat-block">
       <mat-label translate>device-profile.provision-device-secret</mat-label>
       <input matInput formControlName="provisionDeviceSecret" required/>
-      <button mat-button matSuffix mat-icon-button
+      <button matSuffix mat-icon-button
               ngxClipboard
               [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceSecret').value"
               (cbOnSuccess)="onProvisionCopied(false)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
index 1ef7892ecb..2cd22b8069 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
@@ -24,19 +24,19 @@
   <mat-form-field floatLabel="always" class="mat-block" style="padding-top: 8px;"
                   *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value">
     <mat-label translate>device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names</mat-label>
-    <mat-chip-list #attrMetricNamesChipList formControlName="sparkplugAttributesMetricNames">
-      <mat-chip
+    <mat-chip-grid #attrMetricNamesChipList formControlName="sparkplugAttributesMetricNames">
+      <mat-chip-row
         *ngFor="let name of mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplugAttributesMetricNames').value;"
         (removed)="removeAttributeMetricName(name)">
         {{name}}
         <mat-icon matChipRemove>close</mat-icon>
-      </mat-chip>
+      </mat-chip-row>
       <input matInput type="text" placeholder="{{'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate}}"
              [matChipInputFor]="attrMetricNamesChipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              matChipInputAddOnBlur
              (matChipInputTokenEnd)="addAttributeMetricName($event)">
-    </mat-chip-list>
+    </mat-chip-grid>
     <mat-hint innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names-hint' | translate }}"></mat-hint>
   </mat-form-field>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
index a02bd79458..595c32f7a8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
@@ -17,7 +17,7 @@
 -->
 <div fxLayout="column" class="mat-content mat-padding">
   <label class="tb-title" translate>entity.columns-to-display</label>
-  <mat-checkbox style="padding-bottom: 8px;" [(ngModel)]="column.display" *ngFor="let column of (columns | selectableColumns)"
+  <mat-checkbox [(ngModel)]="column.display" *ngFor="let column of (columns | selectableColumns)"
                 (ngModelChange)="update()">
     {{ column.title }}
   </mat-checkbox>

From da4d0f93a31ef5f57222cf70482939a9d3ffca55 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 15 Mar 2023 13:26:19 +0200
Subject: [PATCH 4/9] UI: Fix horizontal stepper scroll

---
 ui-ngx/src/styles.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index bdf2c5463c..71d33b2e54 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -1133,4 +1133,10 @@ mat-label {
   .mat-expansion-panel {
     color: inherit;
   }
+
+  .mat-stepper-horizontal {
+    .mat-horizontal-stepper-wrapper {
+      overflow: auto;
+    }
+  }
 }

From e96e355a31cb7a7bc32e93dc5c67047dfaac177c Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Thu, 16 Mar 2023 11:05:23 +0200
Subject: [PATCH 5/9] UI: Fixed stepper for device and device profile dialog

---
 .../add-device-profile-dialog.component.html  | 230 ++++++------
 .../add-device-profile-dialog.component.scss  |   9 +
 .../device-wizard-dialog.component.html       | 332 +++++++++---------
 .../device-wizard-dialog.component.scss       |   9 +
 4 files changed, 299 insertions(+), 281 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
index 3451f79cd0..77cdae2340 100644
--- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
@@ -15,124 +15,124 @@
     limitations under the License.
 
 -->
-<div>
-  <mat-toolbar color="primary">
-    <h2 translate>device-profile.add</h2>
-    <span fxFlex></span>
-    <div [tb-help]="'deviceProfiles'"></div>
-    <button mat-icon-button
-            (click)="cancel()"
-            type="button">
-      <mat-icon class="material-icons">close</mat-icon>
-    </button>
-  </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content>
-    <mat-horizontal-stepper [linear]="true" #addDeviceProfileStepper (selectionChange)="changeStep($event)">
-      <mat-step [stepControl]="deviceProfileDetailsFormGroup">
-        <form [formGroup]="deviceProfileDetailsFormGroup" style="padding-bottom: 16px;">
-          <ng-template matStepLabel>{{ 'device-profile.device-profile-details' | translate }}</ng-template>
-          <fieldset [disabled]="isLoading$ | async">
-            <mat-form-field class="mat-block">
-              <mat-label translate>device-profile.name</mat-label>
-              <input matInput formControlName="name" required/>
-              <mat-error *ngIf="deviceProfileDetailsFormGroup.get('name').hasError('required')">
-                {{ 'device-profile.name-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="deviceProfileDetailsFormGroup.get('name').hasError('maxlength')">
-                {{ 'device-profile.name-max-length' | translate }}
-              </mat-error>
-            </mat-form-field>
-            <tb-rule-chain-autocomplete
-              labelText="device-profile.default-rule-chain"
-              formControlName="defaultRuleChainId">
-            </tb-rule-chain-autocomplete>
-            <tb-dashboard-autocomplete
-              label="{{'device-profile.mobile-dashboard' | translate}}"
-              formControlName="defaultDashboardId">
-              <span tb-hint>{{'device-profile.mobile-dashboard-hint' | translate}}</span>
-            </tb-dashboard-autocomplete>
-            <tb-queue-autocomplete
-              [queueType]="serviceType"
-              formControlName="defaultQueueName">
-            </tb-queue-autocomplete>
-            <tb-rule-chain-autocomplete
-              labelText="device-profile.default-edge-rule-chain"
-              formControlName="defaultEdgeRuleChainId"
-              [ruleChainType]="edgeRuleChainType">
-              <span tb-hint>{{'device-profile.default-edge-rule-chain-hint' | translate}}</span>
-            </tb-rule-chain-autocomplete>
-            <mat-form-field fxHide class="mat-block">
-              <mat-label translate>device-profile.type</mat-label>
-              <mat-select formControlName="type" required>
-                <mat-option *ngFor="let type of deviceProfileTypes" [value]="type">
-                  {{deviceProfileTypeTranslations.get(type) | translate}}
-                </mat-option>
-              </mat-select>
-              <mat-error *ngIf="deviceProfileDetailsFormGroup.get('type').hasError('required')">
-                {{ 'device-profile.type-required' | translate }}
-              </mat-error>
-            </mat-form-field>
-            <tb-image-input fxFlex
-                            label="{{'device-profile.image' | translate}}"
-                            maxSizeByte="524288"
-                            formControlName="image">
-            </tb-image-input>
-            <mat-form-field class="mat-block">
-              <mat-label translate>device-profile.description</mat-label>
-              <textarea matInput formControlName="description" rows="2"></textarea>
-            </mat-form-field>
-          </fieldset>
-        </form>
-      </mat-step>
-      <mat-step [stepControl]="transportConfigFormGroup" [optional]="true">
-        <form [formGroup]="transportConfigFormGroup" style="padding-bottom: 16px;">
-          <ng-template matStepLabel>{{ 'device-profile.transport-configuration' | translate }}</ng-template>
+<mat-toolbar color="primary">
+  <h2 translate>device-profile.add</h2>
+  <span fxFlex></span>
+  <div [tb-help]="'deviceProfiles'"></div>
+  <button mat-icon-button
+          (click)="cancel()"
+          type="button">
+    <mat-icon class="material-icons">close</mat-icon>
+  </button>
+</mat-toolbar>
+<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
+</mat-progress-bar>
+<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+<div mat-dialog-content>
+  <mat-horizontal-stepper [linear]="true" #addDeviceProfileStepper (selectionChange)="changeStep($event)">
+    <mat-step [stepControl]="deviceProfileDetailsFormGroup">
+      <form [formGroup]="deviceProfileDetailsFormGroup" style="padding-bottom: 16px;">
+        <ng-template matStepLabel>{{ 'device-profile.device-profile-details' | translate }}</ng-template>
+        <fieldset [disabled]="isLoading$ | async">
           <mat-form-field class="mat-block">
-            <mat-label translate>device-profile.transport-type</mat-label>
-            <mat-select formControlName="transportType" required>
-              <mat-option *ngFor="let type of deviceTransportTypes" [value]="type">
-                {{deviceTransportTypeTranslations.get(type) | translate}}
+            <mat-label translate>device-profile.name</mat-label>
+            <input matInput formControlName="name" required/>
+            <mat-error *ngIf="deviceProfileDetailsFormGroup.get('name').hasError('required')">
+              {{ 'device-profile.name-required' | translate }}
+            </mat-error>
+            <mat-error *ngIf="deviceProfileDetailsFormGroup.get('name').hasError('maxlength')">
+              {{ 'device-profile.name-max-length' | translate }}
+            </mat-error>
+          </mat-form-field>
+          <tb-rule-chain-autocomplete
+            labelText="device-profile.default-rule-chain"
+            formControlName="defaultRuleChainId">
+          </tb-rule-chain-autocomplete>
+          <tb-dashboard-autocomplete
+            label="{{'device-profile.mobile-dashboard' | translate}}"
+            formControlName="defaultDashboardId">
+            <span tb-hint>{{'device-profile.mobile-dashboard-hint' | translate}}</span>
+          </tb-dashboard-autocomplete>
+          <tb-queue-autocomplete
+            [queueType]="serviceType"
+            formControlName="defaultQueueName">
+          </tb-queue-autocomplete>
+          <tb-rule-chain-autocomplete
+            labelText="device-profile.default-edge-rule-chain"
+            formControlName="defaultEdgeRuleChainId"
+            [ruleChainType]="edgeRuleChainType">
+            <span tb-hint>{{'device-profile.default-edge-rule-chain-hint' | translate}}</span>
+          </tb-rule-chain-autocomplete>
+          <mat-form-field fxHide class="mat-block">
+            <mat-label translate>device-profile.type</mat-label>
+            <mat-select formControlName="type" required>
+              <mat-option *ngFor="let type of deviceProfileTypes" [value]="type">
+                {{deviceProfileTypeTranslations.get(type) | translate}}
               </mat-option>
             </mat-select>
-            <mat-hint *ngIf="transportConfigFormGroup.get('transportType').value">
-              {{deviceTransportTypeHints.get(transportConfigFormGroup.get('transportType').value) | translate}}
-            </mat-hint>
-            <mat-error *ngIf="transportConfigFormGroup.get('transportType').hasError('required')">
-              {{ 'device-profile.transport-type-required' | translate }}
+            <mat-error *ngIf="deviceProfileDetailsFormGroup.get('type').hasError('required')">
+              {{ 'device-profile.type-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <tb-device-profile-transport-configuration
-            formControlName="transportConfiguration"
-            isAdd="true"
-            required>
-          </tb-device-profile-transport-configuration>
-        </form>
-      </mat-step>
-      <mat-step [stepControl]="alarmRulesFormGroup" [optional]="true">
-        <form [formGroup]="alarmRulesFormGroup" style="padding-bottom: 16px;">
-          <ng-template matStepLabel>{{'device-profile.alarm-rules-with-count' | translate:
-            {count: alarmRulesFormGroup.get('alarms').value ?
-                alarmRulesFormGroup.get('alarms').value.length : 0} }}</ng-template>
-          <tb-device-profile-alarms
-            formControlName="alarms"
-            [deviceProfileId]="null">
-          </tb-device-profile-alarms>
-        </form>
-      </mat-step>
-      <mat-step [stepControl]="provisionConfigFormGroup" [optional]="true">
-        <form [formGroup]="provisionConfigFormGroup" style="padding-bottom: 16px;">
-          <ng-template matStepLabel>{{ 'device-profile.device-provisioning' | translate }}</ng-template>
-          <tb-device-profile-provision-configuration
-            formControlName="provisionConfiguration">
-          </tb-device-profile-provision-configuration>
-        </form>
-      </mat-step>
-    </mat-horizontal-stepper>
-  </div>
-  <div mat-dialog-actions fxLayout="row">
+          <tb-image-input fxFlex
+                          label="{{'device-profile.image' | translate}}"
+                          maxSizeByte="524288"
+                          formControlName="image">
+          </tb-image-input>
+          <mat-form-field class="mat-block">
+            <mat-label translate>device-profile.description</mat-label>
+            <textarea matInput formControlName="description" rows="2"></textarea>
+          </mat-form-field>
+        </fieldset>
+      </form>
+    </mat-step>
+    <mat-step [stepControl]="transportConfigFormGroup" [optional]="true">
+      <form [formGroup]="transportConfigFormGroup" style="padding-bottom: 16px;">
+        <ng-template matStepLabel>{{ 'device-profile.transport-configuration' | translate }}</ng-template>
+        <mat-form-field class="mat-block">
+          <mat-label translate>device-profile.transport-type</mat-label>
+          <mat-select formControlName="transportType" required>
+            <mat-option *ngFor="let type of deviceTransportTypes" [value]="type">
+              {{deviceTransportTypeTranslations.get(type) | translate}}
+            </mat-option>
+          </mat-select>
+          <mat-hint *ngIf="transportConfigFormGroup.get('transportType').value">
+            {{deviceTransportTypeHints.get(transportConfigFormGroup.get('transportType').value) | translate}}
+          </mat-hint>
+          <mat-error *ngIf="transportConfigFormGroup.get('transportType').hasError('required')">
+            {{ 'device-profile.transport-type-required' | translate }}
+          </mat-error>
+        </mat-form-field>
+        <tb-device-profile-transport-configuration
+          formControlName="transportConfiguration"
+          isAdd="true"
+          required>
+        </tb-device-profile-transport-configuration>
+      </form>
+    </mat-step>
+    <mat-step [stepControl]="alarmRulesFormGroup" [optional]="true">
+      <form [formGroup]="alarmRulesFormGroup" style="padding-bottom: 16px;">
+        <ng-template matStepLabel>{{'device-profile.alarm-rules-with-count' | translate:
+          {count: alarmRulesFormGroup.get('alarms').value ?
+              alarmRulesFormGroup.get('alarms').value.length : 0} }}</ng-template>
+        <tb-device-profile-alarms
+          formControlName="alarms"
+          [deviceProfileId]="null">
+        </tb-device-profile-alarms>
+      </form>
+    </mat-step>
+    <mat-step [stepControl]="provisionConfigFormGroup" [optional]="true">
+      <form [formGroup]="provisionConfigFormGroup" style="padding-bottom: 16px;">
+        <ng-template matStepLabel>{{ 'device-profile.device-provisioning' | translate }}</ng-template>
+        <tb-device-profile-provision-configuration
+          formControlName="provisionConfiguration">
+        </tb-device-profile-provision-configuration>
+      </form>
+    </mat-step>
+  </mat-horizontal-stepper>
+</div>
+<div mat-dialog-actions style="padding: 0">
+  <div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutAlign="end center">
     <button mat-stroked-button *ngIf="selectedIndex > 0"
             [disabled]="(isLoading$ | async)"
             (click)="previousStep()">{{ 'action.back' | translate }}</button>
@@ -143,8 +143,8 @@
             [disabled]="(isLoading$ | async)"
             (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button>
   </div>
-  <mat-divider></mat-divider>
-  <div mat-dialog-actions fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end">
+  <mat-divider style="width: 100%"></mat-divider>
+  <div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end center">
     <button mat-button
             [disabled]="(isLoading$ | async)"
             (click)="cancel()">{{ 'action.cancel' | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss
index eaef363192..cec9801e33 100644
--- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss
@@ -15,6 +15,15 @@
  */
 @import "../../../../../scss/constants";
 
+:host {
+  height: 100%;
+  display: grid;
+
+  .dialog-actions-row {
+    padding: 8px;
+  }
+}
+
 :host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
   @media #{$mat-lt-sm} {
     .mat-mdc-dialog-content {
diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
index 4fae225ea9..c1485cf450 100644
--- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
@@ -15,172 +15,172 @@
     limitations under the License.
 
 -->
-<div>
-  <mat-toolbar color="primary">
-    <h2 translate>device.add-device-text</h2>
-    <span fxFlex></span>
-    <div [tb-help]="'devices'"></div>
-    <button mat-icon-button
-            (click)="cancel()"
-            type="button">
-      <mat-icon class="material-icons">close</mat-icon>
-    </button>
-  </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content>
-    <mat-horizontal-stepper [linear]="true" [labelPosition]="labelPosition" #addDeviceWizardStepper (selectionChange)="changeStep($event)">
-      <ng-template matStepperIcon="edit">
-        <mat-icon>check</mat-icon>
-      </ng-template>
-      <mat-step [stepControl]="deviceWizardFormGroup">
-        <form [formGroup]="deviceWizardFormGroup" style="padding-bottom: 16px;">
-          <ng-template matStepLabel>{{ 'device.wizard.device-details' | translate}}</ng-template>
-          <fieldset [disabled]="isLoading$ | async">
-            <mat-form-field class="mat-block">
-              <mat-label translate>device.name</mat-label>
-              <input matInput formControlName="name" required>
-              <mat-error *ngIf="deviceWizardFormGroup.get('name').hasError('required')">
-                {{ 'device.name-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="deviceWizardFormGroup.get('name').hasError('maxlength')">
-                {{ 'device.name-max-length' | translate }}
-              </mat-error>
-            </mat-form-field>
-            <mat-form-field class="mat-block">
-              <mat-label translate>device.label</mat-label>
-              <input matInput formControlName="label">
-              <mat-error *ngIf="deviceWizardFormGroup.get('label').hasError('maxlength')">
-                {{ 'device.label-max-length' | translate }}
-              </mat-error>
-            </mat-form-field>
-            <div fxLayout="row" fxLayoutGap="16px">
-              <mat-radio-group fxLayout="column" formControlName="addProfileType" fxLayoutAlign="space-around">
-                <mat-radio-button [value]="0" color="primary">
-                  <span translate>device.wizard.existing-device-profile</span>
-                </mat-radio-button>
-                <mat-radio-button [value]="1" color="primary">
-                  <span translate>device.wizard.new-device-profile</span>
-                </mat-radio-button>
-              </mat-radio-group>
-              <div fxLayout="column">
-                <tb-device-profile-autocomplete
-                  [required]="!createProfile"
-                  formControlName="deviceProfileId"
-                  [ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 0}"
-                  [addNewProfile]="false"
-                  [selectDefaultProfile]="true"
-                  [editProfileEnabled]="false"
-                  (deviceProfileChanged)="deviceProfileChanged($event)">
-                </tb-device-profile-autocomplete>
-                <mat-form-field fxFlex class="mat-block"
-                                [ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 1}">
-                  <mat-label translate>device-profile.new-device-profile-name</mat-label>
-                  <input matInput formControlName="newDeviceProfileTitle"
-                         [required]="createProfile">
-                  <mat-error *ngIf="deviceWizardFormGroup.get('newDeviceProfileTitle').hasError('required')">
-                    {{ 'device-profile.new-device-profile-name-required' | translate }}
-                  </mat-error>
-                </mat-form-field>
-              </div>
-              <div fxLayout="column" fxLayoutAlign="flex-end start">
-                <tb-rule-chain-autocomplete
-                  [ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 1}"
-                  labelText="device-profile.default-rule-chain"
-                  formControlName="defaultRuleChainId">
-                </tb-rule-chain-autocomplete>
-              </div>
-              <div fxLayout="column" fxLayoutAlign="flex-end start">
-                <tb-queue-autocomplete
-                  [ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 1}"
-                  [queueType]="serviceType"
-                  formControlName="defaultQueueName">
-                </tb-queue-autocomplete>
-              </div>
+<mat-toolbar color="primary">
+  <h2 translate>device.add-device-text</h2>
+  <span fxFlex></span>
+  <div [tb-help]="'devices'"></div>
+  <button mat-icon-button
+          (click)="cancel()"
+          type="button">
+    <mat-icon class="material-icons">close</mat-icon>
+  </button>
+</mat-toolbar>
+<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
+</mat-progress-bar>
+<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+<div mat-dialog-content>
+  <mat-horizontal-stepper [linear]="true" [labelPosition]="labelPosition" #addDeviceWizardStepper (selectionChange)="changeStep($event)">
+    <ng-template matStepperIcon="edit">
+      <mat-icon>check</mat-icon>
+    </ng-template>
+    <mat-step [stepControl]="deviceWizardFormGroup">
+      <form [formGroup]="deviceWizardFormGroup" style="padding-bottom: 16px;">
+        <ng-template matStepLabel>{{ 'device.wizard.device-details' | translate}}</ng-template>
+        <fieldset [disabled]="isLoading$ | async">
+          <mat-form-field class="mat-block">
+            <mat-label translate>device.name</mat-label>
+            <input matInput formControlName="name" required>
+            <mat-error *ngIf="deviceWizardFormGroup.get('name').hasError('required')">
+              {{ 'device.name-required' | translate }}
+            </mat-error>
+            <mat-error *ngIf="deviceWizardFormGroup.get('name').hasError('maxlength')">
+              {{ 'device.name-max-length' | translate }}
+            </mat-error>
+          </mat-form-field>
+          <mat-form-field class="mat-block">
+            <mat-label translate>device.label</mat-label>
+            <input matInput formControlName="label">
+            <mat-error *ngIf="deviceWizardFormGroup.get('label').hasError('maxlength')">
+              {{ 'device.label-max-length' | translate }}
+            </mat-error>
+          </mat-form-field>
+          <div fxLayout="row" fxLayoutGap="16px">
+            <mat-radio-group fxLayout="column" formControlName="addProfileType" fxLayoutAlign="space-around">
+              <mat-radio-button [value]="0" color="primary">
+                <span translate>device.wizard.existing-device-profile</span>
+              </mat-radio-button>
+              <mat-radio-button [value]="1" color="primary">
+                <span translate>device.wizard.new-device-profile</span>
+              </mat-radio-button>
+            </mat-radio-group>
+            <div fxLayout="column">
+              <tb-device-profile-autocomplete
+                [required]="!createProfile"
+                formControlName="deviceProfileId"
+                [ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 0}"
+                [addNewProfile]="false"
+                [selectDefaultProfile]="true"
+                [editProfileEnabled]="false"
+                (deviceProfileChanged)="deviceProfileChanged($event)">
+              </tb-device-profile-autocomplete>
+              <mat-form-field fxFlex class="mat-block"
+                              [ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 1}">
+                <mat-label translate>device-profile.new-device-profile-name</mat-label>
+                <input matInput formControlName="newDeviceProfileTitle"
+                       [required]="createProfile">
+                <mat-error *ngIf="deviceWizardFormGroup.get('newDeviceProfileTitle').hasError('required')">
+                  {{ 'device-profile.new-device-profile-name-required' | translate }}
+                </mat-error>
+              </mat-form-field>
             </div>
-            <div fxLayout="row" fxLayoutGap="16px" style="padding-bottom: 16px;">
-              <mat-checkbox formControlName="gateway">
-                {{ 'device.is-gateway' | translate }}
-              </mat-checkbox>
-              <mat-checkbox *ngIf="deviceWizardFormGroup.get('gateway').value"
-                            formControlName="overwriteActivityTime">
-                {{ 'device.overwrite-activity-time' | translate }}
-              </mat-checkbox>
+            <div fxLayout="column" fxLayoutAlign="flex-end start">
+              <tb-rule-chain-autocomplete
+                [ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 1}"
+                labelText="device-profile.default-rule-chain"
+                formControlName="defaultRuleChainId">
+              </tb-rule-chain-autocomplete>
             </div>
-            <mat-form-field class="mat-block">
-              <mat-label translate>device.description</mat-label>
-              <textarea matInput formControlName="description" rows="2"></textarea>
-            </mat-form-field>
-          </fieldset>
-        </form>
-      </mat-step>
-      <mat-step [stepControl]="transportConfigFormGroup" [optional]="true" *ngIf="createProfile">
-        <form [formGroup]="transportConfigFormGroup" style="padding-bottom: 16px;">
-          <ng-template matStepLabel>{{ 'device-profile.transport-configuration' | translate }}</ng-template><mat-form-field class="mat-block" style="padding-bottom: 14px;">
-          <mat-label translate>device-profile.transport-type</mat-label>
-          <mat-select formControlName="transportType" required>
-            <mat-option *ngFor="let type of deviceTransportTypes" [value]="type">
-              {{deviceTransportTypeTranslations.get(type) | translate}}
-            </mat-option>
-          </mat-select>
-          <mat-hint *ngIf="transportConfigFormGroup.get('transportType').value">
-            {{deviceTransportTypeHints.get(transportConfigFormGroup.get('transportType').value) | translate}}
-          </mat-hint>
-          <mat-error *ngIf="transportConfigFormGroup.get('transportType').hasError('required')">
-            {{ 'device-profile.transport-type-required' | translate }}
-          </mat-error>
-        </mat-form-field>
-          <tb-device-profile-transport-configuration
-            formControlName="transportConfiguration"
-            isAdd="true"
-            required>
-          </tb-device-profile-transport-configuration>
-        </form>
-      </mat-step>
-      <mat-step [stepControl]="alarmRulesFormGroup" [optional]="true" *ngIf="createProfile">
-        <form [formGroup]="alarmRulesFormGroup" style="padding-bottom: 16px;">
-          <ng-template matStepLabel>{{'device-profile.alarm-rules-with-count' | translate:
-            {count: alarmRulesFormGroup.get('alarms').value ?
-                alarmRulesFormGroup.get('alarms').value.length : 0} }}</ng-template>
-          <tb-device-profile-alarms
-            formControlName="alarms"
-            [deviceProfileId]="null">
-          </tb-device-profile-alarms>
-        </form>
-      </mat-step>
-      <mat-step [stepControl]="provisionConfigFormGroup" [optional]="true" *ngIf="createProfile">
-        <form [formGroup]="provisionConfigFormGroup" style="padding-bottom: 16px;">
-          <ng-template matStepLabel>{{ 'device-profile.device-provisioning' | translate }}</ng-template>
-          <tb-device-profile-provision-configuration
-            formControlName="provisionConfiguration">
-          </tb-device-profile-provision-configuration>
-        </form>
-      </mat-step>
-      <mat-step [stepControl]="credentialsFormGroup" [optional]="true">
-        <ng-template matStepLabel>{{ 'device.credentials' | translate }}</ng-template>
-        <form [formGroup]="credentialsFormGroup" style="padding-bottom: 16px;">
-          <mat-checkbox style="padding-bottom: 16px;" formControlName="setCredential">{{ 'device.wizard.add-credentials' | translate }}</mat-checkbox>
-          <tb-device-credentials
-            [fxShow]="credentialsFormGroup.get('setCredential').value"
-            [deviceTransportType]="deviceTransportType"
-            formControlName="credential">
-          </tb-device-credentials>
-        </form>
-      </mat-step>
-      <mat-step [stepControl]="customerFormGroup" [optional]="true">
-        <ng-template matStepLabel>{{ 'customer.customer' | translate }}</ng-template>
-        <form [formGroup]="customerFormGroup" style="padding-bottom: 16px;">
-          <tb-entity-autocomplete
-            formControlName="customerId"
-            labelText="device.wizard.customer-to-assign-device"
-            [entityType]="entityType.CUSTOMER">
-          </tb-entity-autocomplete>
-        </form>
-      </mat-step>
-    </mat-horizontal-stepper>
-  </div>
-  <div mat-dialog-actions fxLayout="row">
+            <div fxLayout="column" fxLayoutAlign="flex-end start">
+              <tb-queue-autocomplete
+                [ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 1}"
+                [queueType]="serviceType"
+                formControlName="defaultQueueName">
+              </tb-queue-autocomplete>
+            </div>
+          </div>
+          <div fxLayout="row" fxLayoutGap="16px" style="padding-bottom: 16px;">
+            <mat-checkbox formControlName="gateway">
+              {{ 'device.is-gateway' | translate }}
+            </mat-checkbox>
+            <mat-checkbox *ngIf="deviceWizardFormGroup.get('gateway').value"
+                          formControlName="overwriteActivityTime">
+              {{ 'device.overwrite-activity-time' | translate }}
+            </mat-checkbox>
+          </div>
+          <mat-form-field class="mat-block">
+            <mat-label translate>device.description</mat-label>
+            <textarea matInput formControlName="description" rows="2"></textarea>
+          </mat-form-field>
+        </fieldset>
+      </form>
+    </mat-step>
+    <mat-step [stepControl]="transportConfigFormGroup" [optional]="true" *ngIf="createProfile">
+      <form [formGroup]="transportConfigFormGroup" style="padding-bottom: 16px;">
+        <ng-template matStepLabel>{{ 'device-profile.transport-configuration' | translate }}</ng-template><mat-form-field class="mat-block" style="padding-bottom: 14px;">
+        <mat-label translate>device-profile.transport-type</mat-label>
+        <mat-select formControlName="transportType" required>
+          <mat-option *ngFor="let type of deviceTransportTypes" [value]="type">
+            {{deviceTransportTypeTranslations.get(type) | translate}}
+          </mat-option>
+        </mat-select>
+        <mat-hint *ngIf="transportConfigFormGroup.get('transportType').value">
+          {{deviceTransportTypeHints.get(transportConfigFormGroup.get('transportType').value) | translate}}
+        </mat-hint>
+        <mat-error *ngIf="transportConfigFormGroup.get('transportType').hasError('required')">
+          {{ 'device-profile.transport-type-required' | translate }}
+        </mat-error>
+      </mat-form-field>
+        <tb-device-profile-transport-configuration
+          formControlName="transportConfiguration"
+          isAdd="true"
+          required>
+        </tb-device-profile-transport-configuration>
+      </form>
+    </mat-step>
+    <mat-step [stepControl]="alarmRulesFormGroup" [optional]="true" *ngIf="createProfile">
+      <form [formGroup]="alarmRulesFormGroup" style="padding-bottom: 16px;">
+        <ng-template matStepLabel>{{'device-profile.alarm-rules-with-count' | translate:
+          {count: alarmRulesFormGroup.get('alarms').value ?
+              alarmRulesFormGroup.get('alarms').value.length : 0} }}</ng-template>
+        <tb-device-profile-alarms
+          formControlName="alarms"
+          [deviceProfileId]="null">
+        </tb-device-profile-alarms>
+      </form>
+    </mat-step>
+    <mat-step [stepControl]="provisionConfigFormGroup" [optional]="true" *ngIf="createProfile">
+      <form [formGroup]="provisionConfigFormGroup" style="padding-bottom: 16px;">
+        <ng-template matStepLabel>{{ 'device-profile.device-provisioning' | translate }}</ng-template>
+        <tb-device-profile-provision-configuration
+          formControlName="provisionConfiguration">
+        </tb-device-profile-provision-configuration>
+      </form>
+    </mat-step>
+    <mat-step [stepControl]="credentialsFormGroup" [optional]="true">
+      <ng-template matStepLabel>{{ 'device.credentials' | translate }}</ng-template>
+      <form [formGroup]="credentialsFormGroup" style="padding-bottom: 16px;">
+        <mat-checkbox style="padding-bottom: 16px;" formControlName="setCredential">{{ 'device.wizard.add-credentials' | translate }}</mat-checkbox>
+        <tb-device-credentials
+          [fxShow]="credentialsFormGroup.get('setCredential').value"
+          [deviceTransportType]="deviceTransportType"
+          formControlName="credential">
+        </tb-device-credentials>
+      </form>
+    </mat-step>
+    <mat-step [stepControl]="customerFormGroup" [optional]="true">
+      <ng-template matStepLabel>{{ 'customer.customer' | translate }}</ng-template>
+      <form [formGroup]="customerFormGroup" style="padding-bottom: 16px;">
+        <tb-entity-autocomplete
+          formControlName="customerId"
+          labelText="device.wizard.customer-to-assign-device"
+          [entityType]="entityType.CUSTOMER">
+        </tb-entity-autocomplete>
+      </form>
+    </mat-step>
+  </mat-horizontal-stepper>
+</div>
+<div mat-dialog-actions style="padding: 0">
+  <div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutAlign="end center">
     <button mat-stroked-button *ngIf="selectedIndex > 0"
             [disabled]="(isLoading$ | async)"
             (click)="previousStep()">{{ 'action.back' | translate }}</button>
@@ -191,8 +191,8 @@
             [disabled]="(isLoading$ | async)"
             (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button>
   </div>
-  <mat-divider></mat-divider>
-  <div mat-dialog-actions fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end">
+  <mat-divider style="width: 100%"></mat-divider>
+  <div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end center">
     <button mat-button
             [disabled]="(isLoading$ | async)"
             (click)="cancel()">{{ 'action.cancel' | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss
index 292d6b3867..6d8f1f76ca 100644
--- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss
@@ -15,6 +15,15 @@
  */
 @import "../../../../../scss/constants";
 
+:host {
+  height: 100%;
+  display: grid;
+
+  .dialog-actions-row {
+    padding: 8px;
+  }
+}
+
 :host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
   @media #{$mat-lt-sm} {
     .mat-mdc-dialog-content {

From 1172d1ce77830093b8e6089d3e8782965cec1128 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Thu, 16 Mar 2023 13:05:46 +0200
Subject: [PATCH 6/9] UI: Fixed expantion panel with hint

---
 .../home/components/widget/data-key-config.component.scss       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss
index f0e7f857a3..e5f6c02ef7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss
@@ -101,7 +101,7 @@
 
         &.comparison {
           .mat-expansion-panel-header {
-            height: 100%;
+            height: fit-content;
           }
         }
 

From 5e212366c282bcabfc29106eae94c7b761a9f425 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Thu, 16 Mar 2023 14:30:02 +0200
Subject: [PATCH 7/9] UI: Fixed height of expation panel for widget settings

---
 .../modules/home/components/widget/widget-config.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index aea23a4e4c..af3f9003aa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -476,7 +476,7 @@
         <fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider">
           <legend class="group-title" translate>widget-config.mobile-mode-settings</legend>
           <mat-expansion-panel class="tb-settings">
-            <mat-expansion-panel-header style="height: 100%;">
+            <mat-expansion-panel-header style="height: fit-content;">
               <mat-panel-title fxLayout.xs="column" fxLayoutAlign.xs="center start" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex="70">
                 <mat-slide-toggle formControlName="mobileHide" (click)="$event.stopPropagation()" fxLayoutAlign="center">
                   {{ 'widget-config.mobile-hide' | translate }}

From db3e0d6828e589b7a8c1aed2d2fdb19d43fb1f70 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Mon, 27 Mar 2023 11:59:04 +0300
Subject: [PATCH 8/9] UI: Fixed widget bundle add button

---
 .../app/modules/home/pages/widget/widget-library.component.scss  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-library.component.scss b/ui-ngx/src/app/modules/home/pages/widget/widget-library.component.scss
index c0f3e21329..8fcd595570 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-library.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-library.component.scss
@@ -15,6 +15,7 @@
  */
 :host {
   button.tb-add-new-widget {
+    height: auto;
     padding-right: 12px;
     font-size: 24px;
     border-style: dashed;

From 1a0b7560308780f9ebe25c52937f484e60a599cb Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Mon, 27 Mar 2023 13:23:19 +0300
Subject: [PATCH 9/9] UI: Fixed stepper

---
 .../add-device-profile-dialog.component.html  |  8 +++++--
 .../add-device-profile-dialog.component.scss  | 24 ++++++-------------
 .../add-device-profile-dialog.component.ts    | 16 +++++++++++--
 .../device-wizard-dialog.component.scss       | 24 ++++++-------------
 ui-ngx/src/styles.scss                        |  6 -----
 5 files changed, 34 insertions(+), 44 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
index 77cdae2340..779bc94f8f 100644
--- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
@@ -29,9 +29,13 @@
 </mat-progress-bar>
 <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
 <div mat-dialog-content>
-  <mat-horizontal-stepper [linear]="true" #addDeviceProfileStepper (selectionChange)="changeStep($event)">
+  <mat-horizontal-stepper [linear]="true"
+                          #addDeviceProfileStepper
+                          [labelPosition]="(stepperLabelPosition | async)"
+                          [orientation]="(stepperOrientation | async)"
+                          (selectionChange)="changeStep($event)">
     <mat-step [stepControl]="deviceProfileDetailsFormGroup">
-      <form [formGroup]="deviceProfileDetailsFormGroup" style="padding-bottom: 16px;">
+      <form [formGroup]="deviceProfileDetailsFormGroup">
         <ng-template matStepLabel>{{ 'device-profile.device-profile-details' | translate }}</ng-template>
         <fieldset [disabled]="isLoading$ | async">
           <mat-form-field class="mat-block">
diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss
index cec9801e33..ca54ae2053 100644
--- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss
@@ -41,31 +41,21 @@
 
     .mat-stepper-horizontal {
       display: flex;
-      flex-direction: column;
       height: 100%;
       overflow: hidden;
-      @media #{$mat-lt-sm} {
-        .mat-step-label {
-          white-space: normal;
-          overflow: visible;
-          .mat-step-text-label {
-            overflow: visible;
-          }
-        }
+
+      .mat-horizontal-stepper-wrapper {
+        flex: 1 1 100%;
       }
+
       .mat-horizontal-content-container {
-        height: 530px;
+        height: 680px;
         max-height: 100%;
         width: 100%;;
         overflow-y: auto;
+        scrollbar-gutter: stable;
         @media #{$mat-gt-sm} {
-          min-width: 800px;
-        }
-      }
-      .mat-horizontal-stepper-content[aria-expanded=true] {
-        height: 100%;
-        form {
-          height: 100%;
+          min-width: 500px;
         }
       }
     }
diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts
index c9b50727ea..3426593aed 100644
--- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts
@@ -44,13 +44,17 @@ import {
 } from '@shared/models/device.models';
 import { DeviceProfileService } from '@core/http/device-profile.service';
 import { EntityType } from '@shared/models/entity-type.models';
-import { MatStepper } from '@angular/material/stepper';
+import { MatStepper, StepperOrientation } from '@angular/material/stepper';
 import { RuleChainId } from '@shared/models/id/rule-chain-id';
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
 import { deepTrim } from '@core/utils';
 import { ServiceType } from '@shared/models/queue.models';
 import { DashboardId } from '@shared/models/id/dashboard-id';
 import { RuleChainType } from '@shared/models/rule-chain.models';
+import { Observable } from 'rxjs';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { MediaBreakpoints } from '@shared/models/constants';
+import { map } from 'rxjs/operators';
 
 export interface AddDeviceProfileDialogData {
   deviceProfileName: string;
@@ -67,7 +71,8 @@ export class AddDeviceProfileDialogComponent extends
   DialogComponent<AddDeviceProfileDialogComponent, DeviceProfile> implements AfterViewInit {
 
   @ViewChild('addDeviceProfileStepper', {static: true}) addDeviceProfileStepper: MatStepper;
-
+  stepperOrientation: Observable<StepperOrientation>;
+  stepperLabelPosition: Observable<'bottom' | 'end'>;
   selectedIndex = 0;
 
   showNext = true;
@@ -102,10 +107,17 @@ export class AddDeviceProfileDialogComponent extends
               public dialogRef: MatDialogRef<AddDeviceProfileDialogComponent, DeviceProfile>,
               private componentFactoryResolver: ComponentFactoryResolver,
               private injector: Injector,
+              private breakpointObserver: BreakpointObserver,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               private deviceProfileService: DeviceProfileService,
               private fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
+    this.stepperOrientation = this.breakpointObserver.observe(MediaBreakpoints['gt-sm'])
+      .pipe(map(({matches}) => matches ? 'horizontal' : 'vertical'));
+
+    this.stepperLabelPosition = this.breakpointObserver.observe(MediaBreakpoints['gt-md'])
+      .pipe(map(({matches}) => matches ? 'end' : 'bottom'));
+
     this.deviceProfileDetailsFormGroup = this.fb.group(
       {
         name: [data.deviceProfileName, [Validators.required, Validators.maxLength(255)]],
diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss
index 6d8f1f76ca..0fe18467fd 100644
--- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss
@@ -45,31 +45,21 @@
 
     .mat-stepper-horizontal {
       display: flex;
-      flex-direction: column;
       height: 100%;
       overflow: hidden;
-      @media #{$mat-lt-sm} {
-        .mat-step-label {
-          white-space: normal;
-          overflow: visible;
-          .mat-step-text-label {
-            overflow: visible;
-          }
-        }
+
+      .mat-horizontal-stepper-wrapper {
+        flex: 1 1 100%;
       }
+
       .mat-horizontal-content-container {
-        height: 530px;
+        height: 680px;
         max-height: 100%;
         width: 100%;;
         overflow-y: auto;
+        scrollbar-gutter: stable;
         @media #{$mat-gt-sm} {
-          min-width: 800px;
-        }
-      }
-      .mat-horizontal-stepper-content[aria-expanded=true] {
-        height: 100%;
-        form {
-          height: 100%;
+          min-width: 500px;
         }
       }
     }
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 71d33b2e54..bdf2c5463c 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -1133,10 +1133,4 @@ mat-label {
   .mat-expansion-panel {
     color: inherit;
   }
-
-  .mat-stepper-horizontal {
-    .mat-horizontal-stepper-wrapper {
-      overflow: auto;
-    }
-  }
 }