From cc990d4ff3ef1cf024e5742ffe2341bc8979320f Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Wed, 3 Apr 2024 13:15:05 +0300
Subject: [PATCH] UI: fixed timeseries chart widget threshold settings styles

---
 ...chart-threshold-settings-panel.component.html | 16 ++++++++--------
 ...chart-threshold-settings-panel.component.scss |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
index 4017a0ca2b..2441305e58 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
@@ -98,10 +98,10 @@
           <input matInput type="number" formControlName="lineWidth" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
         </mat-form-field>
       </div>
-      <div class="tb-form-row space-between column-xs">
+      <div class="tb-form-row column-xs">
         <div translate>widgets.time-series-chart.threshold.start-symbol</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+        <div class="tb-flex row flex-end">
+          <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="startSymbol">
               <mat-option *ngFor="let shape of echartsShapes" [value]="shape">
                 {{ echartsShapeTranslations.get(shape) | translate }}
@@ -109,16 +109,16 @@
             </mat-select>
           </mat-form-field>
           <div class="tb-small-label" translate>widgets.time-series-chart.threshold.symbol-size</div>
-          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+          <mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic">
             <input matInput formControlName="startSymbolSize"
                    type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
         </div>
       </div>
-      <div class="tb-form-row space-between column-xs">
+      <div class="tb-form-row column-xs">
         <div translate>widgets.time-series-chart.threshold.end-symbol</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+        <div class="tb-flex row flex-end">
+          <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="endSymbol">
               <mat-option *ngFor="let shape of echartsShapes" [value]="shape">
                 {{ echartsShapeTranslations.get(shape) | translate }}
@@ -126,7 +126,7 @@
             </mat-select>
           </mat-form-field>
           <div class="tb-small-label" translate>widgets.time-series-chart.threshold.symbol-size</div>
-          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+          <mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic">
             <input matInput formControlName="endSymbolSize"
                    type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.scss
index b65fa6ad65..7e5c0e860d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.scss
@@ -16,7 +16,7 @@
 @import '../../../../../../../../../scss/constants';
 
 .tb-threshold-settings-panel {
-  width: 530px;
+  width: 540px;
   display: flex;
   flex-direction: column;
   gap: 16px;