UI: Fixed stepper

ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html

@@ -29,9 +29,13 @@
 </mat-progress-bar>
 <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
 <div mat-dialog-content>
-  <mat-horizontal-stepper [linear]="true" #addDeviceProfileStepper (selectionChange)="changeStep($event)">
+  <mat-horizontal-stepper [linear]="true"
+                          #addDeviceProfileStepper
+                          [labelPosition]="(stepperLabelPosition | async)"
+                          [orientation]="(stepperOrientation | async)"
+                          (selectionChange)="changeStep($event)">
     <mat-step [stepControl]="deviceProfileDetailsFormGroup">
-      <form [formGroup]="deviceProfileDetailsFormGroup" style="padding-bottom: 16px;">
+      <form [formGroup]="deviceProfileDetailsFormGroup">
         <ng-template matStepLabel>{{ 'device-profile.device-profile-details' | translate }}</ng-template>
         <fieldset [disabled]="isLoading$ | async">
           <mat-form-field class="mat-block">

ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss

@@ -41,31 +41,21 @@
 
     .mat-stepper-horizontal {
       display: flex;
-      flex-direction: column;
       height: 100%;
       overflow: hidden;
-      @media #{$mat-lt-sm} {
-        .mat-step-label {
-          white-space: normal;
-          overflow: visible;
-          .mat-step-text-label {
-            overflow: visible;
-          }
-        }
+
+      .mat-horizontal-stepper-wrapper {
+        flex: 1 1 100%;
       }
+
       .mat-horizontal-content-container {
-        height: 530px;
+        height: 680px;
         max-height: 100%;
         width: 100%;;
         overflow-y: auto;
+        scrollbar-gutter: stable;
         @media #{$mat-gt-sm} {
-          min-width: 800px;
-        }
-      }
-      .mat-horizontal-stepper-content[aria-expanded=true] {
-        height: 100%;
-        form {
-          height: 100%;
+          min-width: 500px;
         }
       }
     }

ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts

@@ -44,13 +44,17 @@ import {
 } from '@shared/models/device.models';
 import { DeviceProfileService } from '@core/http/device-profile.service';
 import { EntityType } from '@shared/models/entity-type.models';
-import { MatStepper } from '@angular/material/stepper';
+import { MatStepper, StepperOrientation } from '@angular/material/stepper';
 import { RuleChainId } from '@shared/models/id/rule-chain-id';
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
 import { deepTrim } from '@core/utils';
 import { ServiceType } from '@shared/models/queue.models';
 import { DashboardId } from '@shared/models/id/dashboard-id';
 import { RuleChainType } from '@shared/models/rule-chain.models';
+import { Observable } from 'rxjs';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { MediaBreakpoints } from '@shared/models/constants';
+import { map } from 'rxjs/operators';
 
 export interface AddDeviceProfileDialogData {
   deviceProfileName: string;
@@ -67,7 +71,8 @@ export class AddDeviceProfileDialogComponent extends
   DialogComponent<AddDeviceProfileDialogComponent, DeviceProfile> implements AfterViewInit {
 
   @ViewChild('addDeviceProfileStepper', {static: true}) addDeviceProfileStepper: MatStepper;
-
+  stepperOrientation: Observable<StepperOrientation>;
+  stepperLabelPosition: Observable<'bottom' | 'end'>;
   selectedIndex = 0;
 
   showNext = true;
@@ -102,10 +107,17 @@ export class AddDeviceProfileDialogComponent extends
               public dialogRef: MatDialogRef<AddDeviceProfileDialogComponent, DeviceProfile>,
               private componentFactoryResolver: ComponentFactoryResolver,
               private injector: Injector,
+              private breakpointObserver: BreakpointObserver,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               private deviceProfileService: DeviceProfileService,
               private fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
+    this.stepperOrientation = this.breakpointObserver.observe(MediaBreakpoints['gt-sm'])
+      .pipe(map(({matches}) => matches ? 'horizontal' : 'vertical'));
+
+    this.stepperLabelPosition = this.breakpointObserver.observe(MediaBreakpoints['gt-md'])
+      .pipe(map(({matches}) => matches ? 'end' : 'bottom'));
+
     this.deviceProfileDetailsFormGroup = this.fb.group(
       {
         name: [data.deviceProfileName, [Validators.required, Validators.maxLength(255)]],

ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss

@@ -45,31 +45,21 @@
 
     .mat-stepper-horizontal {
       display: flex;
-      flex-direction: column;
       height: 100%;
       overflow: hidden;
-      @media #{$mat-lt-sm} {
-        .mat-step-label {
-          white-space: normal;
-          overflow: visible;
-          .mat-step-text-label {
-            overflow: visible;
-          }
-        }
+
+      .mat-horizontal-stepper-wrapper {
+        flex: 1 1 100%;
       }
+
       .mat-horizontal-content-container {
-        height: 530px;
+        height: 680px;
         max-height: 100%;
         width: 100%;;
         overflow-y: auto;
+        scrollbar-gutter: stable;
         @media #{$mat-gt-sm} {
-          min-width: 800px;
-        }
-      }
-      .mat-horizontal-stepper-content[aria-expanded=true] {
-        height: 100%;
-        form {
-          height: 100%;
+          min-width: 500px;
         }
       }
     }

ui-ngx/src/styles.scss

@@ -1133,10 +1133,4 @@ mat-label {
   .mat-expansion-panel {
     color: inherit;
   }
-
-  .mat-stepper-horizontal {
-    .mat-horizontal-stepper-wrapper {
-      overflow: auto;
-    }
-  }
 }