From 21a6ed6be79c8a17e5650526491557927e5cd783 Mon Sep 17 00:00:00 2001
From: Artem Babak <artemio.babak@gmail.com>
Date: Mon, 26 Sep 2022 15:57:41 +0300
Subject: [PATCH] Data key config style update - Settings tab. Aggregation
 section: fixed mat-expansion-panel height

---
 .../widget/data-key-config.component.html          | 14 +++++++-------
 .../widget/data-key-config.component.scss          |  8 +++++++-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.html b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.html
index a36cab05ff..1ca6b131b0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.html
@@ -63,20 +63,20 @@
         </mat-form-field>
       </div>
       <section *ngIf="widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries" fxLayout="column">
-        <mat-form-field style="padding-bottom: 46px;">
+        <mat-form-field>
           <mat-label translate>datakey.aggregation</mat-label>
           <mat-select formControlName="aggregationType" style="min-width: 150px;">
             <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
               {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
             </mat-option>
           </mat-select>
-          <mat-hint style="line-height: 15px;">
-            {{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }}
-            <section *ngIf="dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE">
-              {{ 'datakey.aggregation-type-hint-common' | translate }}
-            </section>
-          </mat-hint>
         </mat-form-field>
+        <div class="tb-hint after-fields">
+          {{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }}
+          <section *ngIf="dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE">
+            {{ '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">
diff --git a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss
index 77f1e3a2b3..c4ea8019d6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss
@@ -58,6 +58,12 @@
         }
       }
     }
+
+    .tb-hint.after-fields {
+      margin-top: -1.25em;
+      max-width: fit-content;
+      line-height: 15px;
+    }
   }
 }
 
@@ -95,7 +101,7 @@
 
         &.comparison {
           .mat-expansion-panel-header {
-            height: 140px;
+            height: 100%;
           }
         }