From 544f29f0e19898b3667de97643e1ee2d9779c4c3 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 3 Aug 2023 19:26:35 +0300
Subject: [PATCH] UI: Responsive layout improvements.

---
 .../add-widget-dialog.component.html          |   5 +-
 .../dashboard-image-dialog.component.html     |  16 +--
 .../dashboard-widget-select.component.scss    |   2 -
 .../value-card-basic-config.component.html    |  14 +-
 .../basic/common/data-key-row.component.html  |   2 +-
 .../data-key-config-dialog.component.html     |   2 +-
 .../config/data-key-config.component.html     | 130 +++++++++---------
 .../widget/config/data-keys.component.html    |   4 +-
 .../widget/config/data-keys.component.scss    |   3 +
 .../widget/config/datasources.component.html  |  24 ++--
 .../widget/config/datasources.component.scss  |  43 +++++-
 .../lib/navigation-card-widget.component.html |   2 +-
 .../alarms-table-key-settings.component.html  |   8 +-
 ...larms-table-widget-settings.component.html |   6 +-
 ...entities-table-key-settings.component.html |   8 +-
 ...ities-table-widget-settings.component.html |  10 +-
 ...meseries-table-key-settings.component.html |   8 +-
 ...s-table-latest-key-settings.component.html |   8 +-
 ...eries-table-widget-settings.component.html |   6 +-
 .../value-card-widget-settings.component.html |   8 +-
 .../chart/flot-key-settings.component.html    |   8 +-
 .../chart/flot-threshold.component.html       |   2 +-
 .../chart/flot-threshold.component.scss       |   7 +
 .../chart/flot-widget-settings.component.html |  24 ++--
 .../background-settings-panel.component.html  |   2 +-
 .../background-settings-panel.component.ts    |   2 +-
 .../common/image-cards-select.component.html  |   2 +-
 .../common/value-source.component.html        |   6 +-
 .../components/image-input.component.html     |  66 ++++-----
 .../components/image-input.component.scss     | 118 +++++++---------
 .../components/image-input.component.ts       |   3 -
 .../components/toggle-header.component.scss   |   4 +-
 .../components/toggle-header.component.ts     |  37 +++--
 .../components/unit-input.component.html      |   2 +-
 .../assets/locale/locale.constant-ca_ES.json  |   1 -
 .../assets/locale/locale.constant-en_US.json  |   4 +-
 .../assets/locale/locale.constant-es_ES.json  |   1 -
 .../assets/locale/locale.constant-zh_CN.json  |   1 -
 .../assets/locale/locale.constant-zh_TW.json  |   1 -
 ui-ngx/src/form.scss                          |  25 ++--
 40 files changed, 330 insertions(+), 295 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
index 47f8634462..7b6939df52 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
@@ -18,8 +18,9 @@
 <form class="tb-add-widget-dialog" [formGroup]="widgetFormGroup">
   <mat-toolbar color="primary">
     <div class="tb-add-widget-toolbar">
-      <h2 fxFlex>{{'widget.add' | translate}}: {{data.widgetInfo.widgetName}}</h2>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap.gt-xs="16px">
+      <h2>{{'widget.add' | translate}}:</h2>
+      <span fxFlex>{{data.widgetInfo.widgetName}}</span>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap.gt-xs="16px" style="min-width: fit-content;">
         <tb-toggle-select *ngIf="hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs"
                           [(ngModel)]="widgetConfigMode" [ngModelOptions]="{standalone: true}">
           <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
index 9fdfa56744..9019161c29 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
@@ -28,7 +28,7 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content style="position: relative;">
-    <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px">
+    <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" fxLayout="column" fxLayoutAlign="center stretch" fxLayoutGap="8px">
       <div [formGroup]="dashboardRectFormGroup" fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="center center">
         <mat-form-field class="rect-field">
           <mat-label>Top %</mat-label>
@@ -53,14 +53,14 @@
           <input matInput formControlName="bottom" type="number" step="1" min="0" max="100">
         </mat-form-field>
       </div>
-      <div [formGroup]="dashboardRectFormGroup" fxFlex fxLayout="row" fxLayoutGap="8px">
+      <div fxLayout="row" fxLayoutAlign="center center">
+        <button mat-raised-button color="accent"
+                type="button"
+                [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)"
+                (click)="takeScreenShot()">
+          {{ 'dashboard.take-screenshot' | translate }}
+        </button>
       </div>
-      <button mat-raised-button color="accent"
-              type="button"
-              [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)"
-              (click)="takeScreenShot()">
-        {{ 'dashboard.take-screenshot' | translate }}
-      </button>
       <div [formGroup]="dashboardImageFormGroup">
         <tb-image-input [showPreview]="false" label="{{'dashboard.image' | translate}}"
                         formControlName="dashboardImage">
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
index e86f828111..a82f9c2f8b 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
@@ -45,8 +45,6 @@
         }
 
         .preview {
-          width: 100%;
-          height: 100%;
           max-width: 100%;
           max-height: 100%;
           object-fit: contain;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
index 788c997740..356612564f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
@@ -45,7 +45,7 @@
         {{ 'widgets.value-card.label' | translate }}
       </mat-slide-toggle>
       <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-font-settings formControlName="labelFont"
@@ -60,7 +60,7 @@
         {{ 'widgets.value-card.icon' | translate }}
       </mat-slide-toggle>
       <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" class="number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -75,10 +75,10 @@
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.value-card.value</div>
       <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-unit-input fxFlex formControlName="units"></tb-unit-input>
-        <mat-form-field fxFlex appearance="outline" class="number" subscriptSizing="dynamic">
+        <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix translate>widget-config.decimals-suffix</div>
+          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
@@ -87,11 +87,11 @@
         </tb-color-settings>
       </div>
     </div>
-    <div [fxShow]="dateEnabled" class="tb-form-row">
+    <div [fxShow]="dateEnabled" class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
         <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
index 62f34f3d28..63f936195a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
@@ -28,7 +28,7 @@
                     (removed)="removeKey()">
         <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px" class="tb-attribute-chip">
           <div class="tb-chip-labels">
-            <div class="tb-chip-label">
+            <div class="tb-chip-label tb-chip-text tb-chip-icon">
               <ng-container *ngIf="isEntityDatasource">
                 <mat-icon class="tb-mat-18 tb-datakey-icon" *ngIf="modelValue.type === dataKeyTypes.alarm"
                           matTooltip="{{'datakey.alarm' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
index 6d9de8e118..19ad94d76d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
@@ -20,7 +20,7 @@
     <h2>{{ 'datakey.configuration' | translate }}</h2>
     <span fxFlex></span>
     <tb-toggle-select *ngIf="hasAdvanced"
-                      appearance="fill-invert" [options]="dataKeyConfigHeaderOptions"
+                      appearance="fill-invert" selectMediaBreakpoint="xs" [options]="dataKeyConfigHeaderOptions"
                       [(ngModel)]="dataKeyConfigMode" [ngModelOptions]="{ standalone: true }">
     </tb-toggle-select>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
index 8510e19f24..4a4a2c4d90 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
@@ -65,6 +65,18 @@
                         formControlName="color">
         </tb-color-input>
       </div>
+      <section fxLayout="column" *ngIf="modelValue.type === dataKeyTypes.function">
+        <span translate>datakey.data-generation-func</span>
+        <br/>
+        <tb-js-func #funcBodyEdit
+                    [functionArgs]="['time', 'prevValue']"
+                    [globalVariables]="functionScopeVariables"
+                    [validationArgs]="[[1, 1],[1, '1']]"
+                    resultType="any"
+                    helpId="widget/config/datakey_generation_fn"
+                    formControlName="funcBody">
+        </tb-js-func>
+      </section>
       <ng-container *ngIf="widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries">
         <mat-form-field subscriptSizing="dynamic">
           <mat-label translate>datakey.aggregation</mat-label>
@@ -80,72 +92,62 @@
             {{ 'datakey.aggregation-type-hint-common' | translate }}
           </section>
         </div>
-        <fieldset *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE" class="fields-group fields-group-slider">
-          <legend class="group-title" translate>datakey.delta-calculation</legend>
-          <mat-expansion-panel class="tb-settings comparison" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value">
-            <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-              <mat-panel-title fxLayout="column" fxLayoutAlign="center start">
-                <mat-slide-toggle formControlName="comparisonEnabled" (click)="$event.stopPropagation()">
-                  {{ 'datakey.enable-delta-calculation' | translate }}
-                </mat-slide-toggle>
-                <mat-hint class="tb-hint" style="line-height: 15px; padding-left: 45px;">{{ 'datakey.enable-delta-calculation-hint' | translate }}</mat-hint>
-              </mat-panel-title>
-            </mat-expansion-panel-header>
-            <ng-template matExpansionPanelContent>
-              <section fxLayout="column" *ngIf="dataKeyFormGroup.get('comparisonEnabled').value">
-                <mat-form-field fxFlex class="mat-block">
-                  <mat-label translate>widgets.chart.time-for-comparison</mat-label>
-                  <mat-select formControlName="timeForComparison">
-                    <mat-option [value]="'previousInterval'">
-                      {{ 'widgets.chart.time-for-comparison-previous-interval' | translate }}
-                    </mat-option>
-                    <mat-option [value]="'days'">
-                      {{ 'widgets.chart.time-for-comparison-days' | translate }}
-                    </mat-option>
-                    <mat-option [value]="'weeks'">
-                      {{ 'widgets.chart.time-for-comparison-weeks' | translate }}
-                    </mat-option>
-                    <mat-option [value]="'months'">
-                      {{ 'widgets.chart.time-for-comparison-months' | translate }}
-                    </mat-option>
-                    <mat-option [value]="'years'">
-                      {{ 'widgets.chart.time-for-comparison-years' | translate }}
-                    </mat-option>
-                    <mat-option [value]="'customInterval'">
-                      {{ 'widgets.chart.time-for-comparison-custom-interval' | translate }}
-                    </mat-option>
-                  </mat-select>
-                </mat-form-field>
-                <mat-form-field *ngIf="dataKeyFormGroup.get('timeForComparison').value === 'customInterval'" fxFlex class="mat-block">
-                  <mat-label translate>widgets.chart.custom-interval-value</mat-label>
-                  <input required matInput type="number" min="0" formControlName="comparisonCustomIntervalValue">
-                </mat-form-field>
-                <mat-form-field style="padding-bottom: 16px;">
-                  <mat-label translate>datakey.delta-calculation-result</mat-label>
-                  <mat-select formControlName="comparisonResultType" style="min-width: 150px;">
-                    <mat-option *ngFor="let comparisonResultType of comparisonResults" [value]="comparisonResultType">
-                      {{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }}
-                    </mat-option>
-                  </mat-select>
-                </mat-form-field>
-              </section>
-            </ng-template>
-          </mat-expansion-panel>
-        </fieldset>
       </ng-container>
-      <section fxLayout="column" *ngIf="modelValue.type === dataKeyTypes.function">
-        <span translate>datakey.data-generation-func</span>
-        <br/>
-        <tb-js-func #funcBodyEdit
-                    [functionArgs]="['time', 'prevValue']"
-                    [globalVariables]="functionScopeVariables"
-                    [validationArgs]="[[1, 1],[1, '1']]"
-                    resultType="any"
-                    helpId="widget/config/datakey_generation_fn"
-                    formControlName="funcBody">
-        </tb-js-func>
-      </section>
     </div>
+    <div *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE"
+         class="tb-form-panel tb-slide-toggle">
+      <div class="tb-form-panel-title" translate>datakey.delta-calculation</div>
+      <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value">
+        <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-panel-title fxLayout="column" fxLayoutAlign="center start">
+            <mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()">
+              {{ 'datakey.enable-delta-calculation' | translate }}
+            </mat-slide-toggle>
+            <mat-hint class="tb-hint" style="line-height: 15px; padding-left: 52px;">{{ 'datakey.enable-delta-calculation-hint' | translate }}</mat-hint>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <ng-template matExpansionPanelContent>
+          <section fxLayout="column" *ngIf="dataKeyFormGroup.get('comparisonEnabled').value">
+            <mat-form-field fxFlex class="mat-block">
+              <mat-label translate>widgets.chart.time-for-comparison</mat-label>
+              <mat-select formControlName="timeForComparison">
+                <mat-option [value]="'previousInterval'">
+                  {{ 'widgets.chart.time-for-comparison-previous-interval' | translate }}
+                </mat-option>
+                <mat-option [value]="'days'">
+                  {{ 'widgets.chart.time-for-comparison-days' | translate }}
+                </mat-option>
+                <mat-option [value]="'weeks'">
+                  {{ 'widgets.chart.time-for-comparison-weeks' | translate }}
+                </mat-option>
+                <mat-option [value]="'months'">
+                  {{ 'widgets.chart.time-for-comparison-months' | translate }}
+                </mat-option>
+                <mat-option [value]="'years'">
+                  {{ 'widgets.chart.time-for-comparison-years' | translate }}
+                </mat-option>
+                <mat-option [value]="'customInterval'">
+                  {{ 'widgets.chart.time-for-comparison-custom-interval' | translate }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field *ngIf="dataKeyFormGroup.get('timeForComparison').value === 'customInterval'" fxFlex class="mat-block">
+              <mat-label translate>widgets.chart.custom-interval-value</mat-label>
+              <input required matInput type="number" min="0" formControlName="comparisonCustomIntervalValue">
+            </mat-form-field>
+            <mat-form-field style="padding-bottom: 16px;">
+              <mat-label translate>datakey.delta-calculation-result</mat-label>
+              <mat-select formControlName="comparisonResultType" style="min-width: 150px;">
+                <mat-option *ngFor="let comparisonResultType of comparisonResults" [value]="comparisonResultType">
+                  {{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </section>
+        </ng-template>
+      </mat-expansion-panel>
+    </div>
+
     <div class="tb-form-panel tb-slide-toggle"
          *ngIf="(modelValue.type === dataKeyTypes.timeseries || modelValue.type === dataKeyTypes.attribute || modelValue.type === dataKeyTypes.count) && showPostProcessing">
       <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('usePostProcessing').value" [disabled]="!dataKeyFormGroup.get('usePostProcessing').value">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html
index e024af20ee..3226ffed5e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html
@@ -47,7 +47,7 @@
             <mat-icon class="tb-mat-18">drag_indicator</mat-icon>
           </div>
           <div class="tb-chip-labels">
-            <div class="tb-chip-label">
+            <div class="tb-chip-label tb-chip-text tb-chip-icon">
               <ng-container *ngIf="isEntityDatasource">
                 <mat-icon class="tb-mat-18 tb-datakey-icon" *ngIf="key.type === dataKeyTypes.alarm"
                           matTooltip="{{'datakey.alarm' | translate }}"
@@ -71,7 +71,7 @@
               </strong>
             </div>
           </div>
-          <div *ngIf="!hideDataKeyColor" style="padding: 3px;">
+          <div *ngIf="!hideDataKeyColor" fxHide.xs style="padding: 3px;">
             <div #keyColorButton class="tb-color-preview small box" (click)="openColorPickerPopup(key, $event, keyColorButton)">
               <div class="tb-color-result" [style]="{background: key.color}"></div>
             </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.scss b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.scss
index 1664dafb7f..574d1df38e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.scss
@@ -70,6 +70,9 @@
           text-overflow: ellipsis;
           white-space: nowrap;
         }
+        &.tb-chip-icon {
+          min-width: 24px;
+        }
         .mat-icon.tb-datakey-icon {
           margin-right: 4px;
           margin-left: 4px;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
index 2e4a984858..0ee6a7c508 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
@@ -44,29 +44,27 @@
                 [cdkDropListDisabled]="dragDisabled"
                 formArrayName="datasources">
         <mat-list-item *ngFor="let datasourceControl of datasourcesControls; trackBy: trackByDatasource; let $index = index;"
-                       class="tb-datasource-list-item tb-draggable" [ngClass]="{'bordered': !singleDatasource}" cdkDrag
+                       class="tb-datasource-list-item tb-draggable" cdkDrag
                        [cdkDragDisabled]="dragDisabled">
-          <div fxFlex fxLayout="row" fxLayoutAlign="start start">
-            <div *ngIf="!singleDatasource" fxLayout="row" fxLayoutAlign="center center" style="width: 42px; height: 56px;">
+          <div class="tb-datasource-row">
+            <div *ngIf="!singleDatasource" class="tb-datasource-index-container">
               <div class="tb-datasource-index">{{$index + 1}}</div>
             </div>
-            <div class="tb-datasource-params" fxFlex>
-              <div fxFlex
-                   fxLayout="row"
-                   fxLayoutAlign="start">
-                <tb-datasource fxFlex
-                               [formControl]="datasourceControl">
+            <div class="tb-datasource-params">
+              <div class="tb-datasource-item">
+                <tb-datasource [formControl]="datasourceControl">
                 </tb-datasource>
-                <div *ngIf="!singleDatasource && !disabled" fxLayout="row" fxLayoutAlign="center center" style="height: 56px;">
-                  <button type="button"
-                          mat-icon-button color="primary"
+                <div *ngIf="!singleDatasource && !disabled" class="tb-datasource-buttons">
+                  <button class="tb-box-button" type="button"
+                          mat-icon-button
                           (click)="removeDatasource($index)"
                           matTooltip="{{ 'widget-config.remove-datasource' | translate }}"
                           matTooltipPosition="above">
                     <mat-icon>delete</mat-icon>
                   </button>
                   <button *ngIf="!dragDisabled"
-                          mat-icon-button color="primary"
+                          class="tb-box-button"
+                          mat-icon-button
                           type="button"
                           cdkDragHandle
                           matTooltip="{{ 'action.drag' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss
index 5b356afcf2..a42020611d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss
@@ -20,11 +20,6 @@
     height: auto;
     display: block;
     padding: 0;
-    &.bordered {
-      padding-top: 16px;
-      border: 1px solid rgba(0, 0, 0, 0.12);
-      border-radius: 6px;
-    }
   }
   &.tb-draggable {
     &.cdk-drag-preview {
@@ -34,7 +29,24 @@
 }
 
 .tb-datasource-list-item + .tb-datasource-list-item {
-  margin-top: 16px;
+  margin-top: 24px;
+}
+
+.tb-datasource-row {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  place-content: flex-start;
+  align-items: flex-start;
+}
+
+.tb-datasource-index-container {
+  width: 36px;
+  height: 56px;
+  display: flex;
+  flex-direction: row;
+  place-content: flex-start;
+  align-items: center;
 }
 
 .tb-datasource-index {
@@ -61,6 +73,25 @@
 
 .tb-datasource-params {
   position: relative;
+  flex: 1;
+  min-width: 0;
+  .tb-datasource-item {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    tb-datasource {
+      flex: 1;
+      min-width: 0;
+    }
+    .tb-datasource-buttons {
+      height: 56px;
+      display: flex;
+      flex-direction: row;
+      place-content: center;
+      align-items: center;
+    }
+  }
   tb-error.tb-datasource-error {
     position: absolute;
     bottom: 4px;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.html
index dadf3317d8..77da2cabbb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.html
@@ -16,6 +16,6 @@
 
 -->
 <a mat-raised-button color="primary" class="tb-nav-button" href="{{settings.path}}" (click)="navigate($event, settings.path)">
-  <tb-icon class="tb-mat-96">{{settings.icon}}</tb-icon>
+  <tb-icon matButtonIcon class="tb-mat-96">{{settings.icon}}</tb-icon>
   <span>{{translatedName}}</span>
 </a>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
index 9baf6c998f..f408c6d93e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
@@ -62,8 +62,8 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-cell-style-function' | translate }}
@@ -86,8 +86,8 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-cell-content-function' | translate }}
diff --git 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
index 4ec8f31be6..e304def2c8 100644
--- 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
@@ -94,7 +94,7 @@
     <mat-slide-toggle class="mat-slide" formControlName="displayPagination">
       {{ 'widgets.table.display-pagination' | translate }}
     </mat-slide-toggle>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row space-between column-xs">
       <div translate>widgets.table.default-page-size</div>
       <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
         <input matInput formControlName="defaultPageSize" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -104,8 +104,8 @@
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.table.rows</div>
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableWidgetSettingsForm.get('useRowStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-row-style-function' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html
index 02d51ee325..faad357026 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html
@@ -62,8 +62,8 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="entitiesTableKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-cell-style-function' | translate }}
@@ -86,8 +86,8 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="entitiesTableKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-cell-content-function' | translate }}
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 f8867b9f6a..c9c57d8843 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
@@ -41,7 +41,7 @@
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.table.columns</div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="displayEntityName">
         {{ 'widgets.table.display-entity-name' | translate }}
       </mat-slide-toggle>
@@ -49,7 +49,7 @@
         <input matInput formControlName="entityNameColumnTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="displayEntityName">
         {{ 'widgets.table.display-entity-label' | translate }}
       </mat-slide-toggle>
@@ -91,7 +91,7 @@
     <mat-slide-toggle class="mat-slide"  formControlName="displayPagination">
       {{ 'widgets.table.display-pagination' | translate }}
     </mat-slide-toggle>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row space-between column-xs">
       <div translate>widgets.table.default-page-size</div>
       <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
         <input matInput formControlName="defaultPageSize" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -101,8 +101,8 @@
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.table.rows</div>
     <mat-expansion-panel class="tb-settings" [expanded]="entitiesTableWidgetSettingsForm.get('useRowStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-row-style-function' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
index 6c79eed622..165f4eb0f7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
@@ -50,8 +50,8 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-cell-style-function' | translate }}
@@ -74,8 +74,8 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-cell-content-function' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
index 97cbe28ae9..fd34b66af6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
@@ -59,8 +59,8 @@
   </div>
   <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableLatestKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-cell-style-function' | translate }}
@@ -83,8 +83,8 @@
   </div>
   <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableLatestKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-cell-content-function' | translate }}
diff --git 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
index 170d460f92..d70ae9964b 100644
--- 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
@@ -59,7 +59,7 @@
     <mat-slide-toggle class="mat-slide"  formControlName="displayPagination">
       {{ 'widgets.table.display-pagination' | translate }}
     </mat-slide-toggle>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row space-between column-xs">
       <div translate>widgets.table.default-page-size</div>
       <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
         <input matInput formControlName="defaultPageSize" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -78,8 +78,8 @@
       {{ 'widgets.table.hide-empty-lines' | translate }}
     </mat-slide-toggle>
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableWidgetSettingsForm.get('useRowStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.table.use-row-style-function' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
index 423c727a8d..71a9b60118 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
@@ -44,8 +44,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" class="number" subscriptSizing="dynamic">
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -67,11 +67,11 @@
         </tb-color-settings>
       </div>
     </div>
-    <div [fxShow]="dateEnabled" class="tb-form-row">
+    <div [fxShow]="dateEnabled" class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
         <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
diff --git 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
index 96ff4d8559..a424b61606 100644
--- 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
@@ -32,8 +32,8 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('showLines').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="showLines" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.chart.show-line' | translate }}
@@ -65,8 +65,8 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('showPoints').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="showPoints" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.chart.show-points' | translate }}
diff --git 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
index 6f08b5f3f7..be2ae39255 100644
--- 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
@@ -17,7 +17,7 @@
 -->
 <div class="tb-flot-threshold">
   <mat-expansion-panel class="tb-settings tb-flot-threshold-settings" fxFlex [formGroup]="thresholdFormGroup" [(expanded)]="expanded">
-    <mat-expansion-panel-header class="fill-width">
+    <mat-expansion-panel-header>
       <div class="tb-threshold-header">
         <div class="tb-threshold-text">{{ thresholdText() }}</div>
         <mat-divider vertical></mat-divider>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.scss
index 150d516894..81f5d17bc6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.scss
@@ -29,6 +29,9 @@
       display: flex;
       flex-direction: row;
       align-items: stretch;
+      .mat-content {
+        overflow: hidden;
+      }
       .tb-threshold-header {
         flex: 1;
         display: flex;
@@ -36,6 +39,7 @@
         gap: 16px;
         align-items: center;
         padding-left: 16px;
+        overflow: hidden;
         .mat-divider-vertical {
           height: 100%;
         }
@@ -47,6 +51,9 @@
         font-weight: 400;
         line-height: 16px;
         letter-spacing: 0.15px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
       .mat-expansion-indicator {
         margin-right: 22px;
diff --git 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
index 5dd7eaa2dc..4ea648c3b4 100644
--- 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
@@ -77,8 +77,8 @@
   <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widget-config.legend</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widget-config.legend' | translate }}
@@ -119,8 +119,8 @@
       <div class="tb-form-panel stroked tb-slide-toggle">
         <div class="tb-form-panel-title" translate>widgets.chart.ticks</div>
         <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('yaxis.showLabels').value">
-          <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-            <mat-panel-title fxFlex="60">
+          <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-panel-title>
               <mat-slide-toggle class="mat-slide" formControlName="showLabels" (click)="$event.stopPropagation()"
                                 fxLayoutAlign="center">
                 {{ 'widgets.chart.ticks' | translate }}
@@ -171,8 +171,8 @@
       <div class="tb-form-panel stroked tb-slide-toggle">
         <div class="tb-form-panel-title" translate>widgets.chart.ticks</div>
         <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('xaxis.showLabels').value">
-          <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-            <mat-panel-title fxFlex="60">
+          <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-panel-title>
               <mat-slide-toggle class="mat-slide" formControlName="showLabels" (click)="$event.stopPropagation()"
                                 fxLayoutAlign="center">
                 {{ 'widgets.chart.ticks' | translate }}
@@ -234,8 +234,8 @@
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.chart.tooltip</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.chart.tooltip' | translate }}
@@ -274,8 +274,8 @@
   <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.chart.comparison-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('comparisonEnabled').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.chart.enable-comparison' | translate }}
@@ -350,8 +350,8 @@
   <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.chart.custom-legend-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('customLegendEnabled').value">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title fxFlex="60">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
           <mat-slide-toggle class="mat-slide" formControlName="customLegendEnabled" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.chart.enable-custom-legend' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
index ca5d4bc8b9..42c4472cca 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
@@ -20,7 +20,7 @@
   <div class="tb-form-panel">
     <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
       <div class="tb-form-panel-title" translate>widgets.background.background</div>
-      <tb-toggle-select formControlName="type" fxFlex>
+      <tb-toggle-select formControlName="type" fxFlex selectMediaBreakpoint="xs">
         <tb-toggle-option *ngFor="let type of backgroundTypes"
                           [value]="type">
           {{ backgroundTypeTranslationsMap.get(type) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.ts
index 51d2ddec1b..465d3383e2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.ts
@@ -94,7 +94,7 @@ export class BackgroundSettingsPanelComponent extends PageComponent implements O
   }
 
   applyColorSettings() {
-    const backgroundSettings = this.backgroundSettingsFormGroup.value;
+    const backgroundSettings = this.backgroundSettingsFormGroup.getRawValue();
     this.backgroundSettingsApplied.emit(backgroundSettings);
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
index eb2bbd6711..52bd5907bd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
@@ -17,7 +17,7 @@
 -->
 <div class="tb-image-cards-select tb-form-panel stroked no-padding">
   <mat-expansion-panel class="tb-settings" [expanded]="expanded" disabled>
-    <mat-expansion-panel-header class="fill-width" fxLayout="row wrap">
+    <mat-expansion-panel-header fxLayout="row wrap">
       <div fxFlex class="tb-form-row no-border"  [class.expanded]="expanded">
         <div class="fixed-title-width">{{ label }}</div>
         <mat-form-field class="tb-image-cards-value-field" fxFlex appearance="outline" subscriptSizing="dynamic" (click)="toggleSelectPanel($event)">
diff --git 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
index 3cc771e94f..726aed776e 100644
--- 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
@@ -17,7 +17,7 @@
 -->
 <ng-container [formGroup]="valueSourceFormGroup">
   <div style="display: flex;">
-    <tb-toggle-select formControlName="valueSource" style="min-width: 300px;">
+    <tb-toggle-select formControlName="valueSource" style="width: 300px;" selectMediaBreakpoint="xs">
       <tb-toggle-option [value]="'predefinedValue'">
         {{ 'widgets.value-source.predefined-value' | translate }}
       </tb-toggle-option>
@@ -32,7 +32,7 @@
       <input matInput formControlName="value" type="number" placeholder="{{ 'widget-config.set' | translate }}">
     </mat-form-field>
   </div>
-  <div [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'" class="tb-form-row space-between">
+  <div [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'" class="tb-form-row space-between column-xs">
     <div translate>widgets.value-source.source-entity-alias</div>
     <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
       <input matInput type="text" placeholder="{{ 'widget-config.set' | translate }}"
@@ -54,7 +54,7 @@
       </mat-autocomplete>
     </mat-form-field>
   </div>
-  <div [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'" class="tb-form-row space-between">
+  <div [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'" class="tb-form-row space-between column-xs">
     <div translate>widgets.value-source.source-entity-attribute</div>
     <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
       <input matInput type="text" placeholder="{{ 'widget-config.set' | translate }}"
diff --git a/ui-ngx/src/app/shared/components/image-input.component.html b/ui-ngx/src/app/shared/components/image-input.component.html
index d2512a8148..2786d626b6 100644
--- a/ui-ngx/src/app/shared/components/image-input.component.html
+++ b/ui-ngx/src/app/shared/components/image-input.component.html
@@ -20,38 +20,14 @@
   <ng-container #flow="flow"
                 [flowConfig]="{singleFile: true, allowDuplicateUploads: true}">
     <div class="tb-image-select-container">
-      <div class="image-container" *ngIf="showPreview">
-        <div class="image-content-container" [ngClass]="{'no-padding': disabled}">
-          <div class="tb-image-preview-container">
-            <div *ngIf="!safeImageUrl; else elseBlock">{{ (disabled ? 'dashboard.empty-image' : 'dashboard.no-image') | translate }}</div>
-            <ng-template #elseBlock><img class="tb-image-preview" [src]="safeImageUrl" /></ng-template>
-          </div>
-          <div *ngIf="showClearButton && !disabled" class="tb-image-clear-container">
-            <button mat-icon-button color="primary"
-                    type="button"
-                    (click)="clearImage()"
-                    matTooltip="{{ 'action.remove' | translate }}"
-                    matTooltipPosition="above">
-              <mat-icon>close</mat-icon>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div *ngIf="!disabled" class="drop-area tb-flow-drop"
-           [ngClass]="{'float-left': !showPreview && showClearButton}"
-           flowDrop
-           [flow]="flow.flowJs">
-        <div class="upload-label">
-          <mat-icon>cloud_upload</mat-icon>
-          <span translate>image-input.drop-image-or</span>
-          <button type="button" mat-button color="primary" class="browse-file">
-            <label for="{{inputId}}">{{'file-input.browse-file' | translate}}</label>
-          </button>
-          <input class="file-input" flowButton type="file" [flow]="flow.flowJs" [flowAttributes]="{accept: 'image/*'}" id="{{inputId}}">
+      <div class="image-container" *ngIf="showPreview && (safeImageUrl || disabled)" [class]="{'disabled': disabled}">
+        <div class="tb-image-preview-container">
+          <div class="tb-image-preview-text" *ngIf="!safeImageUrl && disabled; else elseBlock">{{ 'dashboard.empty-image' | translate }}</div>
+          <ng-template #elseBlock><img class="tb-image-preview" [src]="safeImageUrl" /></ng-template>
         </div>
-      </div>
-      <div *ngIf="!showPreview && showClearButton && !disabled" class="tb-image-clear-container full-height">
-        <button mat-icon-button color="primary"
+        <button *ngIf="safeImageUrl && !disabled"
+                mat-icon-button color="primary"
+                class="tb-mat-24"
                 type="button"
                 (click)="clearImage()"
                 matTooltip="{{ 'action.remove' | translate }}"
@@ -59,7 +35,33 @@
           <mat-icon>close</mat-icon>
         </button>
       </div>
-    </div>
+      <div *ngIf="!disabled" class="drop-area tb-flow-drop"
+           flowDrop
+           [flow]="flow.flowJs">
+        <div class="upload-label">
+          <mat-icon class="tb-mat-32">cloud_upload</mat-icon>
+          <div class="upload-text-area">
+            <span class="hide-xs" translate>image-input.drag-and-drop</span>
+            <div class="upload-button-area">
+              <span class="hide-xs" translate>image-input.or</span>
+              <button type="button" mat-button color="primary" class="browse-file">
+                <label for="{{inputId}}">{{'image-input.browse' | translate}}</label>
+              </button>
+              <input class="file-input" flowButton type="file" [flow]="flow.flowJs" [flowAttributes]="{accept: 'image/*'}" id="{{inputId}}">
+            </div>
+          </div>
+        </div>
+      </div>
+      <button *ngIf="!showPreview && safeImageUrl && !disabled"
+              mat-icon-button color="primary"
+              class="tb-mat-24"
+              type="button"
+              (click)="clearImage()"
+              matTooltip="{{ 'action.remove' | translate }}"
+              matTooltipPosition="above">
+        <mat-icon>close</mat-icon>
+      </button>
+  </div>
   </ng-container>
   <div class="tb-hint" *ngIf="maxSizeByte && !disabled" translate [translateParams]="{ size: maxSizeByte | fileSize}">dashboard.maximum-upload-file-size</div>
 </div>
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 a776bc8cd7..b7d05bef8d 100644
--- a/ui-ngx/src/app/shared/components/image-input.component.scss
+++ b/ui-ngx/src/app/shared/components/image-input.component.scss
@@ -15,9 +15,8 @@
  */
 @import "../../../scss/constants";
 
-$containerHeight: 120px !default;
-$previewContainerWidth: 168px !default;
-$previewSize: 96px !default;
+$containerHeight: 96px !default;
+$previewSize: 78px !default;
 
 :host {
 
@@ -31,30 +30,39 @@ $previewSize: 96px !default;
   }
 
   .tb-image-select-container {
-    position: relative;
     width: 100%;
     height: $containerHeight;
+    display: flex;
+    gap: 12px;
+    align-items: center;
   }
 
   .image-container {
-    position: relative;
-    float: left;
-    height: $containerHeight;
-    padding: 12px;
-    margin-right: 8px;
-    background: rgba(0, 0, 0, 0.03);
+    background: #F3F6FA;
     border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    padding: 8px 12px 8px 8px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    &.disabled {
+      padding: 8px;
+    }
   }
 
-  .image-content-container {
-    background: #FFFFFF;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
-    padding-left: 8px;
+  .tb-image-preview-container {
+    width: $previewSize;
     height: $previewSize;
-    &.no-padding {
-      padding-left: 0px;
-    }
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tb-image-preview-text {
+    font-size: 14px;
+    text-align: center;
   }
 
   .tb-image-preview {
@@ -64,57 +72,18 @@ $previewSize: 96px !default;
     max-height: $previewSize  - 2px;
   }
 
-  .tb-image-preview-container {
-    position: relative;
-    float: left;
-    width: $previewSize;
-    height: $previewSize;
-    margin-top: -1px;
-    margin-bottom: -1px;
-    border: 1px solid rgba(0, 0, 0, 0.54);
-
-    div {
-      width: 100%;
-      font-size: 18px;
-      text-align: center;
-    }
-
-    div,
-    .tb-image-preview {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-
-  .tb-image-clear-container {
-    position: relative;
-    float: right;
-    height: $previewSize;
-    display: flex;
-    align-items: center;
-    &.full-height {
-      height: $containerHeight;
-    }
-  }
-
   .file-input {
     display: none;
   }
 
   .tb-flow-drop {
-    position: relative;
-    height: $containerHeight;
+    height: 100%;
+    flex: 1;
     overflow: hidden;
     border: 2px dashed rgba(0, 0, 0, 0.2);
     border-radius: 4px;
     box-sizing: border-box;
 
-    &.float-left {
-      float: left;
-    }
-
     .upload-label {
       width: 100%;
       height: 100%;
@@ -123,11 +92,29 @@ $previewSize: 96px !default;
       flex-direction: row;
       justify-content: center;
       align-items: center;
-      font-size: 16px;
-      color: rgba(0, 0, 0, 0.54);
-      text-align: center;
+      gap: 8px;
       .mat-icon {
-        margin-right: 17px;
+        color: rgba(0,0,0,0.12);
+      }
+      .upload-text-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 16px;
+        line-height: 24px;
+        color: rgba(0, 0, 0, 0.54);
+        text-align: center;
+        .hide-xs {
+          @media #{$mat-xs} {
+            display: none;
+          }
+        }
+      }
+      .upload-button-area {
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 6px;
       }
     }
   }
@@ -138,13 +125,14 @@ $previewSize: 96px !default;
 }
 
 :host ::ng-deep {
-  button.browse-file {
+  button.mat-mdc-button.mat-mdc-button-base.browse-file {
     padding: 0;
+    min-width: 0;
+    height: 24px;
     font-size: 16px;
     label {
       display: block;
       cursor: pointer;
-      padding: 0 16px;
     }
   }
 }
diff --git a/ui-ngx/src/app/shared/components/image-input.component.ts b/ui-ngx/src/app/shared/components/image-input.component.ts
index 026b64a413..f5b80aa1e0 100644
--- a/ui-ngx/src/app/shared/components/image-input.component.ts
+++ b/ui-ngx/src/app/shared/components/image-input.component.ts
@@ -65,9 +65,6 @@ export class ImageInputComponent extends PageComponent implements AfterViewInit,
   @Input()
   disabled: boolean;
 
-  @Input()
-  showClearButton = true;
-
   @Input()
   showPreview = true;
 
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.scss b/ui-ngx/src/app/shared/components/toggle-header.component.scss
index 7a41032961..ac24f7bf29 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.scss
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.scss
@@ -29,10 +29,12 @@
       display: block;
     }
   }
-  .tb-toggle-container {
+  .tb-toggle-container, .tb-toggle-header-select {
     display: inline-grid;
     grid-column: 2;
     overflow: hidden;
+  }
+  .tb-toggle-container {
     &.tb-disable-pagination {
       overflow: visible;
     }
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.ts b/ui-ngx/src/app/shared/components/toggle-header.component.ts
index a7bddfc7b4..5781f9fac9 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.ts
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.ts
@@ -16,7 +16,7 @@
 
 import {
   AfterContentChecked,
-  AfterContentInit,
+  AfterContentInit, AfterViewChecked,
   AfterViewInit,
   ChangeDetectorRef,
   Component,
@@ -117,7 +117,8 @@ export abstract class _ToggleBase extends PageComponent implements AfterContentI
   templateUrl: './toggle-header.component.html',
   styleUrls: ['./toggle-header.component.scss']
 })
-export class ToggleHeaderComponent extends _ToggleBase implements OnInit, AfterViewInit, AfterContentInit, AfterContentChecked, OnDestroy {
+export class ToggleHeaderComponent extends _ToggleBase implements OnInit, AfterViewInit, AfterContentInit,
+  AfterContentChecked, AfterViewChecked, OnDestroy {
 
   @ViewChild('toggleGroup', {static: false})
   toggleGroup: ElementRef<HTMLElement>;
@@ -130,6 +131,7 @@ export class ToggleHeaderComponent extends _ToggleBase implements OnInit, AfterV
 
   @HostBinding('class.tb-toggle-header-pagination-controls-enabled')
   private showPaginationControls = false;
+  private _showPaginationControlsChanged = false;
 
   private toggleGroupResize$: ResizeObserver;
 
@@ -254,6 +256,14 @@ export class ToggleHeaderComponent extends _ToggleBase implements OnInit, AfterV
     }
   }
 
+  ngAfterViewChecked() {
+    if (this._showPaginationControlsChanged) {
+      this.scrollToToggleOptionValue();
+      this._showPaginationControlsChanged = false;
+      this.cd.markForCheck();
+    }
+  }
+
   trackByHeaderOption(index: number, option: ToggleHeaderOption){
     return option.value;
   }
@@ -301,10 +311,13 @@ export class ToggleHeaderComponent extends _ToggleBase implements OnInit, AfterV
   private scrollToToggleOptionValue() {
     if (this.buttonToggleGroup && this.buttonToggleGroup.selected) {
       const selectedToggleButton = this.buttonToggleGroup.selected as MatButtonToggle;
+      const index = this.options.findIndex(o => o.value === selectedToggleButton.value);
+      const isLast = index === this.options.length - 1;
+      const isFirst = index === 0;
       const viewLength = this.toggleGroupContainer.nativeElement.offsetWidth;
       const {offsetLeft, offsetWidth} = (selectedToggleButton._buttonElement.nativeElement.offsetParent as HTMLElement);
-      const labelBeforePos = offsetLeft; // this.toggleGroup.nativeElement.offsetWidth - offsetLeft;
-      const labelAfterPos = labelBeforePos + offsetWidth;
+      const labelBeforePos = isFirst ? 0 : offsetLeft;
+      const labelAfterPos = isLast ? this.toggleGroup.nativeElement.scrollWidth : labelBeforePos + offsetWidth;
       const beforeVisiblePos = this.scrollDistance;
       const afterVisiblePos = this.scrollDistance + viewLength;
       if (labelBeforePos < beforeVisiblePos) {
@@ -331,9 +344,7 @@ export class ToggleHeaderComponent extends _ToggleBase implements OnInit, AfterV
         if (!isEnabled) {
           this.scrollDistance = 0;
         } else {
-          setTimeout(() => {
-            this.scrollToToggleOptionValue();
-          }, 0);
+          this._showPaginationControlsChanged = true;
         }
         this.cd.markForCheck();
         this.showPaginationControls = isEnabled;
@@ -373,11 +384,13 @@ export class ToggleHeaderComponent extends _ToggleBase implements OnInit, AfterV
   }
 
   private updateToggleHeaderScrollPosition() {
-    const scrollDistance = this.scrollDistance;
-    const translateX = -scrollDistance;
-    this.toggleGroup.nativeElement.style.transform = `translateX(${Math.round(translateX)}px)`;
-    if (this.platform.TRIDENT || this.platform.EDGE) {
-      this.toggleGroupContainer.nativeElement.scrollLeft = 0;
+    if (this.toggleGroupContainer) {
+      const scrollDistance = this.scrollDistance;
+      const translateX = -scrollDistance;
+      this.toggleGroup.nativeElement.style.transform = `translateX(${Math.round(translateX)}px)`;
+      if (this.platform.TRIDENT || this.platform.EDGE) {
+        this.toggleGroupContainer.nativeElement.scrollLeft = 0;
+      }
     }
   }
 }
diff --git a/ui-ngx/src/app/shared/components/unit-input.component.html b/ui-ngx/src/app/shared/components/unit-input.component.html
index 0ae14b8ba9..c15b232444 100644
--- a/ui-ngx/src/app/shared/components/unit-input.component.html
+++ b/ui-ngx/src/app/shared/components/unit-input.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field fxFlex appearance="outline" class="tb-inline-field tb-suffix-show-on-hover" subscriptSizing="dynamic">
+<mat-form-field fxFlex appearance="outline" class="tb-inline-field tb-suffix-show-on-hover" subscriptSizing="dynamic" style="width: 100%;">
   <input matInput #unitInput [formControl]="unitsFormControl"
          placeholder="{{ 'widget-config.set' | translate }}"
          (focusin)="onFocus()"
diff --git a/ui-ngx/src/assets/locale/locale.constant-ca_ES.json b/ui-ngx/src/assets/locale/locale.constant-ca_ES.json
index 25ae92b297..c36061c6a5 100644
--- a/ui-ngx/src/assets/locale/locale.constant-ca_ES.json
+++ b/ui-ngx/src/assets/locale/locale.constant-ca_ES.json
@@ -2802,7 +2802,6 @@
         "browse-files": "Navegar fitxers"
     },
     "image-input": {
-        "drop-image-or": "Arrossegar i deixar anar imatges o",
         "drop-images-or": "Arrossegar i deixar anar imatges o",
         "no-images": "No hi ha imatges seleccionades",
         "images": "imatges"
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index ba6bbda7ad..7f0a271a04 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -2696,8 +2696,10 @@
         "browse-files": "Browse files"
     },
     "image-input": {
-        "drop-image-or": "Drag and drop an image or",
         "drop-images-or": "Drag and drop an images or",
+        "drag-and-drop": "Drag & Drop",
+        "or": "or",
+        "browse": "Browse",
         "no-images": "No images selected",
         "images": "images"
     },
diff --git a/ui-ngx/src/assets/locale/locale.constant-es_ES.json b/ui-ngx/src/assets/locale/locale.constant-es_ES.json
index 6a1516a56d..8aba862e65 100644
--- a/ui-ngx/src/assets/locale/locale.constant-es_ES.json
+++ b/ui-ngx/src/assets/locale/locale.constant-es_ES.json
@@ -2602,7 +2602,6 @@
         "browse-files": "Navegar ficheros"
     },
     "image-input": {
-        "drop-image-or": "Arrastrar y soltar una imagen o",
         "drop-images-or": "Arrastrar y soltar imagenes o",
         "no-images": "No hay imágenes seleccionadas",
         "images": "imágenes"
diff --git a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json
index 78978b9896..1a083e45fb 100644
--- a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json
+++ b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json
@@ -2459,7 +2459,6 @@
         "browse-files": "浏览文件"
     },
     "image-input": {
-        "drop-image-or": "拖拽图片或",
         "drop-images-or": "拖拽图片或",
         "no-images": "没有图片",
         "images": "图片"
diff --git a/ui-ngx/src/assets/locale/locale.constant-zh_TW.json b/ui-ngx/src/assets/locale/locale.constant-zh_TW.json
index d8712eed6e..a5e6a2bc97 100644
--- a/ui-ngx/src/assets/locale/locale.constant-zh_TW.json
+++ b/ui-ngx/src/assets/locale/locale.constant-zh_TW.json
@@ -2363,7 +2363,6 @@
         "browse-files": "瀏覽文件"
     },
     "image-input": {
-        "drop-image-or": "拖放圖像或",
         "drop-images-or": "拖放圖像或",
         "no-images": "未選擇任何圖像",
         "images": "圖像"
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index e763be31e9..14711b85b4 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -22,6 +22,12 @@
     align-items: stretch;
     gap: 12px;
     padding: 12px 12px 12px 16px;
+    .mat-mdc-form-field, tb-unit-input {
+      width: auto;
+      &.medium-width {
+        width: auto;
+      }
+    }
   }
 }
 
@@ -85,15 +91,6 @@
           line-height: 24px;
           letter-spacing: 0.25px;
           padding: 0;
-          .mat-content {
-            flex: 0;
-            white-space: nowrap;
-          }
-          &.fill-width {
-            .mat-content {
-              flex: 1;
-            }
-          }
           &:hover {
             background: none;
           }
@@ -182,22 +179,20 @@
       margin-top: -7px;
       margin-bottom: -7px;
     }
-    .mat-mdc-form-field {
+    .mat-mdc-form-field, tb-unit-input {
       width: 106px;
       &.medium-width {
         width: 220px;
       }
-      @media #{$mat-xs} {
+      &.flex {
+        flex: 1;
         width: auto;
-        &.medium-width {
-          width: auto;
-        }
       }
     }
     .fixed-title-width {
       min-width: 200px;
       @media #{$mat-xs} {
-        min-width: 0;
+        min-width: fit-content;
       }
     }
     .mat-slide:only-child {