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;
       }