Timewindow: group interval component style change

ui-ngx/src/app/shared/components/time/timeinterval.component.html

@@ -16,14 +16,17 @@
 
 -->
 <section class="tb-form-panel no-border no-padding" [formGroup]="timeintervalFormGroup">
-  <mat-form-field fxFlex class="flex" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
+  <section class="tb-form-row column-xs no-border no-padding tb-standard-fields">
-    <mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label>
+    <ng-content></ng-content>
-    <mat-select formControlName="interval">
+    <mat-form-field fxFlex class="flex" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
-      <mat-option *ngFor="let interval of intervals" [value]="interval.value">
+      <mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label>
-        {{ interval.name | translate:interval.translateParams }}
+      <mat-select formControlName="interval">
-      </mat-option>
+        <mat-option *ngFor="let interval of intervals" [value]="interval.value">
-    </mat-select>
+          {{ interval.name | translate:interval.translateParams }}
-  </mat-form-field>
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </section>
   <section class="tb-form-row column-xs no-border no-padding tb-standard-fields advanced-input"
            formGroupName="customInterval"
            [fxShow]="advanced">

ui-ngx/src/app/shared/components/time/timewindow-form.scss

@@ -28,7 +28,8 @@
     }
 
     &-content {
-      overflow: auto;
+      overflow-x: hidden;
+      overflow-y: auto;
 
       tb-timeinterval,
       tb-quick-time-interval,

ui-ngx/src/app/shared/components/time/timewindow-panel.component.html

@@ -124,8 +124,8 @@
     <ng-container *ngIf="aggregationOptionsAvailable">
       <ng-container formGroupName="aggregation">
         <section class="tb-form-row column-xs space-between same-padding" *ngIf="isEdit || !timewindow.hideAggregation">
-          <div>{{ 'aggregation.aggregation' | translate }}</div>
+          <div class="fixed-title-width-180">{{ 'aggregation.aggregation' | translate }}</div>
-          <mat-form-field subscriptSizing="dynamic" appearance="outline">
+          <mat-form-field class="flex" subscriptSizing="dynamic" appearance="outline">
             <mat-select formControlName="type">
               <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
                 {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
@@ -155,7 +155,6 @@
 
       <section class="tb-form-row column same-padding" [fxShow]="(isEdit || !timewindow.hideAggInterval)
        && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE">
-        <div>{{ 'aggregation.group-interval' | translate }}</div>
         <ng-container formGroupName="realtime" *ngIf="timewindow.selectedTab === timewindowTypes.REALTIME">
           <tb-timeinterval
             formControlName="interval"
@@ -164,6 +163,7 @@
             subscriptSizing="dynamic"
             appearance="outline"
             [disabledAdvanced]="timewindow.realtime.disableCustomGroupInterval">
+            <div class="fixed-title-width-180">{{ 'aggregation.group-interval' | translate }}</div>
           </tb-timeinterval>
         </ng-container>
         <ng-container formGroupName="history" *ngIf="timewindow.selectedTab === timewindowTypes.HISTORY">
@@ -174,6 +174,7 @@
             subscriptSizing="dynamic"
             appearance="outline"
             [disabledAdvanced]="timewindow.history.disableCustomGroupInterval">
+            <div class="fixed-title-width-180">{{ 'aggregation.group-interval' | translate }}</div>
           </tb-timeinterval>
         </ng-container>
       </section>

ui-ngx/src/form.scss

@@ -235,6 +235,10 @@
     .fixed-title-width {
       min-width: 200px;
 
+      &-180 {
+        min-width: 180px;
+      }
+
       &-230 {
         min-width: 230px;
       }