Merge pull request #6978 from vvlladd28/improvement/widget-settings/mobile-view

[3.4.1] UI: Improvement of mobile view in widgets setting
4 years ago · 0f2fe4a97e
44 changed files with 135 additions and 107 deletions
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
@ -22,7 +22,7 @@
      <mat-label translate>widgets.table.alarms-table-title</mat-label>
      <input matInput formControlName="alarmsTitle">
    </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
      <section fxLayout="column" fxFlex>
        <mat-checkbox formControlName="enableSelection" style="margin-bottom: 16px;">
          {{ 'widgets.table.enable-alarms-selection' | translate }}
@ -67,7 +67,7 @@
      <mat-slide-toggle formControlName="allowClear">
        {{ 'widgets.table.allow-alarms-clear' | translate }}
      </mat-slide-toggle>
-      <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+      <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
        <mat-slide-toggle fxFlex formControlName="displayPagination">
          {{ 'widgets.table.display-pagination' | translate }}
        </mat-slide-toggle>
--- 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
@ -22,7 +22,7 @@
      <mat-label translate>widgets.table.entities-table-title</mat-label>
      <input matInput formControlName="entitiesTitle">
    </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
      <section fxLayout="column" fxFlex>
        <mat-checkbox formControlName="enableSearch" style="margin-bottom: 16px;">
          {{ 'widgets.table.enable-search' | translate }}
@ -52,7 +52,7 @@
      </mat-select>
    </mat-form-field>
    <section fxLayout="column" fxLayoutGap="8px">
-      <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+      <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 }}
        </mat-slide-toggle>
@ -61,7 +61,7 @@
          <input matInput formControlName="entityNameColumnTitle">
        </mat-form-field>
      </section>
-      <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+      <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
        <mat-slide-toggle fxFlex formControlName="displayEntityLabel">
          {{ 'widgets.table.display-entity-label' | translate }}
        </mat-slide-toggle>
@ -73,7 +73,7 @@
      <mat-slide-toggle formControlName="displayEntityType">
        {{ 'widgets.table.display-entity-type' | translate }}
      </mat-slide-toggle>
-      <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+      <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
        <mat-slide-toggle fxFlex formControlName="displayPagination">
          {{ 'widgets.table.display-pagination' | translate }}
        </mat-slide-toggle>
--- 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="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+          <section class="row-fill" fxLayout="row" fxLayoutGap="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">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="timeseriesTableWidgetSettingsForm" fxLayout="column">
  <fieldset class="fields-group">
    <legend class="group-title" translate>widgets.table.common-table-settings</legend>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
      <section fxLayout="column" fxFlex>
        <mat-checkbox formControlName="enableSearch" style="margin-bottom: 16px;">
          {{ 'widgets.table.enable-search' | translate }}
@ -51,7 +51,7 @@
      <mat-slide-toggle formControlName="showMilliseconds">
        {{ 'widgets.table.display-milliseconds' | translate }}
      </mat-slide-toggle>
-      <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+      <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
        <mat-slide-toggle fxFlex formControlName="displayPagination">
          {{ 'widgets.table.display-pagination' | translate }}
        </mat-slide-toggle>
--- 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="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section class="row-fill" fxLayout="row" fxLayoutGap="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">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
@ -46,7 +46,7 @@
        </mat-panel-description>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
-        <section fxFlex fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+        <section class="row-fill" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
          <mat-form-field fxFlex class="mat-block">
            <mat-label translate>widgets.chart.line-width</mat-label>
            <input matInput type="number" min="0" formControlName="lineWidth">
@ -74,7 +74,7 @@
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
        <section fxLayout="column">
-          <section fxFlex fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+          <section class="row-fill" fxFlex fxLayout="row" fxLayoutGap="8px">
            <mat-form-field fxFlex class="mat-block">
              <mat-label translate>widgets.chart.points-line-width</mat-label>
              <input matInput type="number" min="0" formControlName="showPointsLineWidth">
@ -137,7 +137,7 @@
      <mat-label translate>widgets.chart.axis-title</mat-label>
      <input matInput formControlName="axisTitle">
    </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.chart.min-scale-value</mat-label>
        <input matInput type="number" formControlName="axisMin">
@ -160,7 +160,7 @@
    </mat-form-field>
    <fieldset class="fields-group">
      <legend class="group-title" translate>widgets.chart.yaxis-tick-labels-settings</legend>
-      <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+      <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
        <mat-form-field fxFlex class="mat-block">
          <mat-label translate>widgets.chart.tick-step-size</mat-label>
          <input matInput type="number" formControlName="axisTickSize">
@ -222,7 +222,7 @@
        </mat-panel-description>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
-        <section fxFlex fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+        <section fxFlex fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
          <mat-form-field fxFlex class="mat-block">
            <mat-label translate>widgets.chart.comparison-values-label</mat-label>
            <input matInput formControlName="comparisonValuesLabel">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
@ -31,7 +31,7 @@
        </mat-panel-description>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
-        <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
          <mat-form-field fxFlex class="mat-block">
            <mat-label translate>widgets.chart.threshold-line-width</mat-label>
            <input type="number" min="0" matInput formControlName="thresholdLineWidth">
--- 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
@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="flotPieWidgetSettingsForm" fxLayout="column">
  <fieldset class="fields-group">
    <legend class="group-title" translate>widgets.chart.common-pie-settings</legend>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.chart.radius</mat-label>
        <input matInput type="number" min="0" formControlName="radius">
@ -41,7 +41,7 @@
  </fieldset>
  <fieldset class="fields-group" formGroupName="stroke">
    <legend class="group-title" translate>widgets.chart.stroke-settings</legend>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section class="row-fill" fxLayout="row" fxLayoutGap="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">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
@ -41,7 +41,7 @@
      <mat-divider></mat-divider>
      <section class="tb-widget-settings" fxLayout="column">
        <tb-value-source [aliasController]="aliasController" formControlName="valueSource"></tb-value-source>
-        <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
          <mat-form-field fxFlex class="mat-block">
            <mat-label translate>widgets.chart.line-width</mat-label>
            <input type="number" min="0" matInput formControlName="lineWidth">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
@ -21,7 +21,8 @@
    <mat-checkbox formControlName="stack" style="margin-bottom: 16px;">
      {{ 'widgets.chart.enable-stacking-mode' | translate }}
    </mat-checkbox>
-    <section *ngIf="chartType === 'graph'" fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section *ngIf="chartType === 'graph'" 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.chart.line-shadow-size</mat-label>
        <input matInput type="number" min="0" formControlName="shadowSize">
@ -30,7 +31,8 @@
        {{ 'widgets.chart.display-smooth-lines' | translate }}
      </mat-checkbox>
    </section>
-    <section *ngIf="chartType === 'bar'" fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section *ngIf="chartType === 'bar'" 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.chart.default-bar-width</mat-label>
        <input matInput type="number" min="0" formControlName="defaultBarWidth">
@ -50,7 +52,7 @@
        </mat-select>
      </mat-form-field>
    </section>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.chart.default-font-size</mat-label>
        <input matInput type="number" min="0" formControlName="fontSize">
@ -166,7 +168,7 @@
      <mat-label translate>widgets.chart.axis-title</mat-label>
      <input matInput formControlName="title">
    </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.chart.min-scale-value</mat-label>
        <input matInput type="number" formControlName="min">
@ -196,7 +198,7 @@
                          icon="format_color_fill"
                          label="{{ 'widgets.chart.ticks-color' | translate }}" openOnInput colorClearButton>
          </tb-color-input>
-          <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
            <mat-form-field fxFlex class="mat-block">
              <mat-label translate>widgets.chart.tick-step-size</mat-label>
              <input matInput type="number" formControlName="tickSize">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
@ -37,7 +37,7 @@
    <div fxLayout="column" fxLayoutGap="0.5em">
      <mat-divider></mat-divider>
      <section class="tb-widget-settings" fxLayout="column">
-        <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
          <mat-form-field fxFlex class="mat-block">
            <mat-label translate>widgets.chart.key-name</mat-label>
            <input required matInput formControlName="name">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
@ -31,7 +31,8 @@
    <mat-label translate>widgets.value-source.value</mat-label>
    <input matInput type="number" formControlName="value">
  </mat-form-field>
-  <section [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+  <section [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'" fxLayout="column" fxLayout.gt-xs="column"
+           fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
    <mat-form-field fxFlex class="mat-block">
      <mat-label>{{ 'widgets.value-source.source-entity-alias' | translate }}</mat-label>
      <input matInput type="text" placeholder="{{ 'entity.entity-alias' | translate }}"
--- 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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="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" fxLayoutGap="8px" fxLayoutAlign="start center">
+  <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
    <tb-color-input
      fxFlex
      formControlName="color"
--- 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
@ -30,7 +30,7 @@
      <mat-label translate>widgets.rpc.initial-value</mat-label>
      <input matInput type="number" formControlName="initialValue">
    </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section class="row-fill" fxLayout="row" fxLayoutGap="8px">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.rpc.min-value</mat-label>
        <input required matInput type="number" formControlName="minValue">
--- 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
@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="persistentTableWidgetSettingsForm" fxLayout="column">
  <fieldset class="fields-group">
    <legend class="group-title" translate>widgets.persistent-table.general-settings</legend>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
      <section fxLayout="column" fxFlex>
        <mat-checkbox formControlName="enableFilter" style="margin-bottom: 16px;">
          {{ 'widgets.persistent-table.enable-filter' | translate }}
@ -43,7 +43,7 @@
      <mat-slide-toggle formControlName="allowDelete">
        {{ 'widgets.persistent-table.allow-delete-request' | translate }}
      </mat-slide-toggle>
-      <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+      <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
        <mat-slide-toggle fxFlex formControlName="displayPagination">
          {{ 'widgets.table.display-pagination' | translate }}
        </mat-slide-toggle>
--- 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="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section fxLayout="row wrap" fxLayoutGap="8px">
      <tb-color-input fxFlex
                      formControlName="textColor"
                      icon="format_color_fill"
--- 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
@ -23,7 +23,7 @@
      <mat-label translate>widgets.rpc.slide-toggle-label</mat-label>
      <input matInput formControlName="title">
    </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section class="row-fill" fxLayout="row" fxLayoutGap="8px">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.rpc.label-position</mat-label>
        <mat-select formControlName="labelPosition">
--- 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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="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" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
      <tb-color-input fxFlex
                      formControlName="colorNeedle"
                      icon="format_color_fill"
--- 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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
      <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="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="0px" 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="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="0px" 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" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
            <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" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
            <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" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
      <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" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
      <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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
      <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" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
      <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" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="row wrap" fxLayoutGap="8px" fxLayoutAlign="start center">
      <tb-color-input fxFlex
                      formControlName="colorBarProgress"
                      icon="format_color_fill"
--- 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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.gauge.min-value</mat-label>
        <input matInput type="number" formControlName="minValue">
@ -65,7 +65,7 @@
      <mat-label translate>widgets.gauge.neon-glow-brightness</mat-label>
      <input matInput type="number" min="0" max="100" formControlName="neonGlowBrightness">
    </mat-form-field>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="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.stripes-thickness</mat-label>
        <input matInput type="number" min="0" formControlName="dashThickness">
--- 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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
          <mat-form-field fxFlex>
            <mat-label translate>widgets.gauge.highlight-from</mat-label>
            <input matInput type="number" formControlName="from">
--- 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
@ -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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="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">
@ -50,7 +50,7 @@
            <input required matInput formControlName="label">
          </mat-form-field>
        </section>
-        <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+        <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="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">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
@ -37,7 +37,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="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.input-widgets.option-value</mat-label>
            <input required matInput formControlName="value">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
@ -25,7 +25,7 @@
  </fieldset>
  <fieldset class="fields-group">
    <legend class="group-title" translate>widgets.input-widgets.image-settings</legend>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px" fxLayoutAlign.gt-sm="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.input-widgets.image-format</mat-label>
        <mat-select formControlName="imageFormat">
@ -45,7 +45,7 @@
        <input matInput type="number" min="0" max="1" formControlName="imageQuality">
      </mat-form-field>
    </section>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px" fxLayoutAlign.gt-sm="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.input-widgets.max-image-width</mat-label>
        <input matInput type="number" min="1" formControlName="maxWidth">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
@ -22,20 +22,20 @@
      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
      <input matInput formControlName="widgetTitle">
    </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px" fxLayoutAlign.gt-sm="start center">
-      <mat-slide-toggle fxFlex fxFlex.gt-sm="20" formControlName="showLabel">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
+      <mat-slide-toggle fxFlex fxFlex.gt-xs="25" formControlName="showLabel">
        {{ 'widgets.input-widgets.show-label' | translate }}
      </mat-slide-toggle>
-      <mat-form-field *ngIf="hasLabelValue" fxFlex fxFlex.gt-sm="80" class="mat-block">
+      <mat-form-field *ngIf="hasLabelValue" fxFlex class="mat-block">
        <mat-label translate>widgets.input-widgets.label</mat-label>
        <input matInput formControlName="labelValue">
      </mat-form-field>
    </section>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px" fxLayoutAlign.gt-sm="start center">
-      <mat-slide-toggle fxFlex fxFlex.gt-sm="20" formControlName="isRequired">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
+      <mat-slide-toggle fxFlex fxFlex.gt-xs="25" formControlName="isRequired">
        {{ 'widgets.input-widgets.required' | translate }}
      </mat-slide-toggle>
-      <mat-form-field fxFlex fxFlex.gt-sm="80" class="mat-block">
+      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.input-widgets.required-error-message</mat-label>
        <input matInput formControlName="requiredErrorMessage">
      </mat-form-field>
--- 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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.input-widgets.true-label</mat-label>
        <input matInput formControlName="trueValue">
--- 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
@ -22,7 +22,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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="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">
--- 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
@ -22,7 +22,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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="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">
--- 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
@ -22,11 +22,11 @@
      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
      <input matInput formControlName="widgetTitle">
    </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px" fxLayoutAlign.gt-sm="start center">
-      <mat-slide-toggle fxFlex fxFlex.gt-sm="20" formControlName="showLabel">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
+      <mat-slide-toggle fxFlex fxFlex.gt-xs="25" formControlName="showLabel">
        {{ 'widgets.input-widgets.show-label' | translate }}
      </mat-slide-toggle>
-      <mat-form-field fxFlex fxFlex.gt-sm="80" class="mat-block">
+      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.input-widgets.label</mat-label>
        <input matInput formControlName="labelValue">
      </mat-form-field>
@ -37,7 +37,7 @@
  </fieldset>
  <fieldset class="fields-group">
    <legend class="group-title" translate>widgets.input-widgets.attribute-settings</legend>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px" fxLayoutAlign.gt-sm="start center">
+    <section class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.input-widgets.widget-mode</mat-label>
        <mat-select formControlName="widgetMode">
--- 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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.input-widgets.latitude-label</mat-label>
        <input matInput formControlName="latLabel">
@ -68,7 +68,7 @@
        </mat-option>
      </mat-select>
    </mat-form-field>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
      <mat-slide-toggle fxFlex formControlName="isLatRequired">
        {{ 'widgets.input-widgets.latitude-field-required' | translate }}
      </mat-slide-toggle>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
@ -21,7 +21,7 @@
  </mat-slide-toggle>
  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
    <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
      <mat-form-field fxFlex="50" class="mat-block">
        <mat-label translate>widgets.input-widgets.datakey-type</mat-label>
        <mat-select formControlName="dataKeyType">
@ -72,7 +72,7 @@
    <mat-checkbox formControlName="required" style="margin-bottom: 8px;">
      {{ 'widgets.input-widgets.value-is-required' | translate }}
    </mat-checkbox>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
      <mat-form-field fxFlex="50" class="mat-block">
        <mat-label translate>widgets.input-widgets.ability-to-edit-attribute</mat-label>
        <mat-select formControlName="isEditable">
@ -140,7 +140,7 @@
                       (updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'integer' ||
                        updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'double')" class="fields-group">
    <legend class="group-title" translate>widgets.input-widgets.numeric-field-settings</legend>
-    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+    <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.input-widgets.step-interval</mat-label>
        <input matInput type="number" min="0" formControlName="step">
@ -162,7 +162,8 @@
      <input matInput formControlName="requiredErrorMessage">
    </mat-form-field>
    <section [fxShow]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'integer' ||
-                       updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'double'" fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+                       updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'double'"
+             class="row-fill" fxLayout="row" fxLayoutGap="8px">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.input-widgets.min-value-error-message</mat-label>
        <input matInput formControlName="minValueErrorMessage">
--- 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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
            <mat-form-field fxFlex class="mat-block">
              <mat-label translate>widgets.input-widgets.save-button-label</mat-label>
              <input matInput formControlName="saveButtonLabel">
@ -61,7 +61,7 @@
  </fieldset>
  <fieldset class="fields-group">
    <legend class="group-title" translate>widgets.input-widgets.group-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
      <mat-slide-toggle fxFlex="30" formControlName="showGroupTitle" class="slide-block">
        {{ 'widgets.input-widgets.show-group-title' | translate }}
      </mat-slide-toggle>
@ -73,7 +73,7 @@
  </fieldset>
  <fieldset class="fields-group">
    <legend class="group-title" translate>widgets.input-widgets.fields-alignment</legend>
-    <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
      <mat-form-field fxFlex="50" class="mat-block">
        <mat-label translate>widgets.input-widgets.fields-alignment</mat-label>
        <mat-select formControlName="fieldsAlignment">
--- 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
@ -22,7 +22,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 class="row-fill" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="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">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
@ -119,7 +119,7 @@
        </fieldset>
        <fieldset class="fields-group">
          <legend class="group-title" translate>widgets.maps.circle-fill-color</legend>
-          <section fxLayout="row" fxLayoutGap="8px">
+          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
            <tb-color-input
              fxFlex
              formControlName="circleFillColor"
@ -155,7 +155,7 @@
        </fieldset>
        <fieldset class="fields-group">
          <legend class="group-title" translate>widgets.maps.circle-stroke</legend>
-          <section fxLayout="row" fxLayoutGap="8px">
+          <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
            <tb-color-input
              fxFlex
              formControlName="circleStrokeColor"
--- 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="row" fxLayoutGap="8px">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
      <tb-datasources-key-autocomplete fxFlex
                                       [fxShow]="provider === mapProvider.image"
                                       required
@ -50,7 +50,7 @@
    </section>
    <mat-expansion-panel class="tb-settings">
      <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxLayoutAlign="end center" translate>
          widget-config.advanced-settings
        </mat-panel-description>
      </mat-expansion-panel-header>
@ -65,7 +65,7 @@
            <input matInput formControlName="defaultCenterPosition">
          </mat-form-field>
        </section>
-        <section fxLayout="row" fxLayoutGap="8px" style="margin-bottom: 15px;">
+        <section fxLayout="column" fxLayout.gt-xs="row" 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 }}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html
@ -21,7 +21,7 @@
  </tb-image-input>
  <fieldset class="fields-group">
    <legend class="group-title" translate>widgets.maps.image-map-background-from-entity-attribute</legend>
-    <section fxLayout="row" fxLayoutGap="8px">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>widgets.maps.image-url-source-entity-alias</mat-label>
        <input matInput type="text"
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
@ -18,10 +18,10 @@
 <section class="tb-widget-settings" [formGroup]="mapEditorSettingsFormGroup">
  <fieldset class="fields-group">
    <legend class="group-title" translate>widgets.maps.editor-settings</legend>
-    <mat-slide-toggle formControlName="snappable" class="slide-block">
+    <mat-slide-toggle formControlName="snappable" class="flex-gap-xs mat-slider-multiline">
      {{ 'widgets.maps.enable-snapping' | translate }}
    </mat-slide-toggle>
-    <mat-slide-toggle formControlName="initDragMode" class="slide-block">
+    <mat-slide-toggle formControlName="initDragMode" class="flex-gap-xs mat-slider-multiline">
      {{ 'widgets.maps.init-draggable-mode' | translate }}
    </mat-slide-toggle>
    <mat-expansion-panel class="tb-settings" [expanded]="!mapEditorSettingsFormGroup.get('hideAllControlButton').value">
--- 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="row" fxLayoutGap="8px">
+        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="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">
@ -44,23 +44,23 @@
            <input matInput type="number" min="0" formControlName="maxClusterRadius">
          </mat-form-field>
        </section>
-        <section fxLayout="row" fxLayoutGap="8px">
-          <mat-slide-toggle fxFlex formControlName="animate" class="slide-block">
+        <section class="flex-gap-xs" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutGap.xs="16px">
+          <mat-slide-toggle fxFlex formControlName="animate" class="slide-block mat-slider-multiline">
            {{ 'widgets.maps.cluster-zoom-animation' | translate }}
          </mat-slide-toggle>
-          <mat-slide-toggle fxFlex formControlName="showCoverageOnHover" class="slide-block">
+          <mat-slide-toggle fxFlex formControlName="showCoverageOnHover" class="slide-block mat-slider-multiline">
            {{ 'widgets.maps.show-markers-bounds-on-cluster-mouse-over' | translate }}
          </mat-slide-toggle>
        </section>
-        <mat-slide-toggle formControlName="spiderfyOnMaxZoom" class="slide-block">
+        <mat-slide-toggle formControlName="spiderfyOnMaxZoom" class="slide-block mat-slider-multiline">
          {{ 'widgets.maps.spiderfy-max-zoom-level' | translate }}
        </mat-slide-toggle>
        <fieldset class="fields-group">
          <legend class="group-title" translate>widgets.maps.load-optimization</legend>
-          <mat-slide-toggle formControlName="chunkedLoading" class="slide-block">
+          <mat-slide-toggle formControlName="chunkedLoading" class="flex-gap-xs mat-slider-multiline large">
            {{ 'widgets.maps.cluster-chunked-loading' | translate }}
          </mat-slide-toggle>
-          <mat-slide-toggle formControlName="removeOutsideVisibleBounds" class="slide-block">
+          <mat-slide-toggle formControlName="removeOutsideVisibleBounds" class="slide-block mat-slider-multiline">
            {{ 'widgets.maps.cluster-markers-lazy-load' | translate }}
          </mat-slide-toggle>
        </fieldset>
--- 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 class="row-fill" fxLayout="row" fxLayoutGap="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 class="row-fill"  fxLayout="row" fxLayoutGap="8px">
            <mat-form-field fxFlex class="mat-block">
              <mat-label translate>widgets.maps.tooltip-offset-x</mat-label>
              <input matInput type="number" formControlName="tooltipOffsetX">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
@ -119,7 +119,7 @@
        </fieldset>
        <fieldset class="fields-group">
          <legend class="group-title" translate>widgets.maps.polygon-color</legend>
-          <section fxLayout="row" fxLayoutGap="8px">
+          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
            <tb-color-input
              fxFlex
              formControlName="polygonColor"
@ -155,7 +155,7 @@
        </fieldset>
        <fieldset class="fields-group">
          <legend class="group-title" translate>widgets.maps.polygon-stroke</legend>
-          <section fxLayout="row" fxLayoutGap="8px">
+          <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
            <tb-color-input
              fxFlex
              formControlName="polygonStrokeColor"
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html
@ -22,7 +22,7 @@
      <mat-label translate>widgets.maps.normalization-step</mat-label>
      <input matInput type="number" min="1" formControlName="normalizationStep">
    </mat-form-field>
-    <section fxLayout="row" fxLayoutGap="8px">
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
      <tb-datasources-key-autocomplete fxFlex
                                       required
                                       [datasources]="widget?.config?.datasources"
@ -51,7 +51,7 @@
          </mat-panel-description>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent>
-          <section fxLayout="row" fxLayoutGap="8px">
+          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
            <tb-color-input
              fxFlex
              formControlName="tooltipColor"
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="tripAnimationPathSettingsFormGroup">
  <fieldset class="fields-group">
    <legend class="group-title" translate>widgets.maps.path-settings</legend>
-    <section fxLayout="row" fxLayoutGap="8px">
+    <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
      <tb-color-input
        fxFlex
        formControlName="color"
@ -70,7 +70,7 @@
          </mat-panel-description>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent>
-          <section fxLayout="row" fxLayoutGap="8px">
+          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
            <mat-form-field fxFlex class="mat-block">
              <mat-label translate>widgets.maps.decorator-symbol</mat-label>
              <mat-select required formControlName="decoratorSymbol">
@ -84,7 +84,7 @@
              <input matInput type="number" min="1" formControlName="decoratorSymbolSize">
            </mat-form-field>
          </section>
-          <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
            <mat-slide-toggle fxFlex formControlName="useDecoratorCustomColor">
              {{ 'widgets.maps.use-path-decorator-custom-color' | translate }}
            </mat-slide-toggle>
@ -95,7 +95,7 @@
              label="{{ 'widgets.maps.decorator-custom-color' | translate }}" openOnInput colorClearButton>
            </tb-color-input>
          </section>
-          <section fxLayout="row" fxLayoutGap="8px">
+          <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
            <mat-form-field fxFlex class="mat-block">
              <mat-label translate>widgets.maps.decorator-offset</mat-label>
              <input matInput formControlName="decoratorOffset">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
@ -31,7 +31,7 @@
        </mat-panel-description>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
-        <section fxLayout="row" fxLayoutGap="8px">
+        <section class="row-fill" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
          <tb-color-input
            fxFlex
            formControlName="pointColor"
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.scss
@ -50,6 +50,7 @@

    .tb-control-list {
      overflow-y: auto;
+
      &.mat-padding {
        padding: 8px;
        @media #{$mat-gt-sm} {
@ -58,10 +59,21 @@
      }
    }

-    .tb-prompt{
+    .tb-prompt {
      margin: 30px 0;
    }
  }
+
+  .flex-gap-xs {
+    margin-bottom: 8px;
+
+    @media #{$mat-xs} {
+      margin-bottom: 16px;
+      &.large {
+        margin-bottom: 24px;
+      }
+    }
+  }
 }

 :host ::ng-deep {
@ -70,6 +82,12 @@
      white-space: normal;
    }

+    .row-fill {
+      .mat-form-field-infix {
+        width: 100%;
+      }
+    }
+
    .mat-expansion-panel {
      &.tb-settings {
        box-shadow: none;
@ -130,5 +148,11 @@
      white-space: normal;
    }

+    .mat-slider-multiline {
+      .mat-slide-toggle-content {
+        line-height: 18px;
+      }
+    }
+
  }
 }