Timewindow: fix mobile layout

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

@@ -15,17 +15,17 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
-  <h2>{{ 'timewindow.timewindow-settings' | translate }}</h2>
-  <span fxFlex></span>
-<!--  <div tb-help="#"></div>-->
-  <button mat-icon-button
-          (click)="cancel()"
-          type="button">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-</mat-toolbar>
 <form [formGroup]="timewindowForm" mat-dialog-content  class="tb-timewindow-form">
+  <mat-toolbar color="primary">
+    <h2>{{ 'timewindow.timewindow-settings' | translate }}</h2>
+    <span fxFlex></span>
+    <!--  <div tb-help="#"></div>-->
+    <button mat-icon-button
+            (click)="cancel()"
+            type="button">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  </mat-toolbar>
   <div class="tb-timewindow-form-header tb-form-panel no-border no-padding-bottom">
     <tb-toggle-select class="tb-timewindow-form-type-options" appearance="fill"
                       [options]="timewindowTypeOptions" formControlName="selectedTab">
@@ -258,20 +258,20 @@
       </div>
     </section>
   </div>
+  <mat-divider></mat-divider>
+  <div mat-dialog-actions class="tb-dialog-actions tb-flex flex-end no-gap">
+    <button type="button"
+            mat-button
+            [disabled]="(isLoading$ | async)"
+            (click)="cancel()">
+      {{ 'action.cancel' | translate }}
+    </button>
+    <button type="button"
+            mat-raised-button
+            color="primary"
+            (click)="update()"
+            [disabled]="(isLoading$ | async) || timewindowForm.invalid || !timewindowForm.dirty">
+      {{ 'action.apply' | translate }}
+    </button>
+  </div>
 </form>
-<mat-divider></mat-divider>
-<div mat-dialog-actions class="tb-dialog-actions tb-flex flex-end no-gap">
-  <button type="button"
-          mat-button
-          [disabled]="(isLoading$ | async)"
-          (click)="cancel()">
-    {{ 'action.cancel' | translate }}
-  </button>
-  <button type="button"
-          mat-raised-button
-          color="primary"
-          (click)="update()"
-          [disabled]="(isLoading$ | async) || timewindowForm.invalid || !timewindowForm.dirty">
-    {{ 'action.apply' | translate }}
-  </button>
-</div>

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

@@ -16,10 +16,6 @@
 @import "../../../../scss/constants";
 
 :host {
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  max-width: 100%;
   background-color: #fff;
 
   .tb-timewindow-form {
@@ -32,7 +28,6 @@
     }
 
     &-content {
-      overflow-x: hidden;
       overflow-y: auto;
 
       tb-timeinterval,

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

@@ -195,20 +195,20 @@
                  formControlName="timezone">
     </tb-timezone>
   </ng-template>
+  <mat-divider></mat-divider>
+  <div class="tb-panel-actions tb-flex flex-end no-gap">
+    <button type="button"
+            mat-button
+            [disabled]="(isLoading$ | async)"
+            (click)="cancel()">
+      {{ 'action.cancel' | translate }}
+    </button>
+    <button type="button"
+            mat-raised-button
+            color="primary"
+            (click)="update()"
+            [disabled]="(isLoading$ | async) || timewindowForm.invalid || !timewindowForm.dirty">
+      {{ 'action.update' | translate }}
+    </button>
+  </div>
 </form>
-<mat-divider></mat-divider>
-<div class="tb-panel-actions tb-flex flex-end no-gap">
-  <button type="button"
-          mat-button
-          [disabled]="(isLoading$ | async)"
-          (click)="cancel()">
-    {{ 'action.cancel' | translate }}
-  </button>
-  <button type="button"
-          mat-raised-button
-          color="primary"
-          (click)="update()"
-          [disabled]="(isLoading$ | async) || timewindowForm.invalid || !timewindowForm.dirty">
-    {{ 'action.update' | translate }}
-  </button>
-</div>

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

@@ -18,6 +18,8 @@
   width: 450px;
 
   .tb-timewindow-form {
+    max-height: 100%;
+
     &-header {
       flex-direction: row;
       align-items: center;

ui-ngx/src/app/shared/components/time/timezone.component.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 :host {
-  min-width: 48px;
+  min-width: 88px;
   margin: 8px 0;
   max-width: 100%;
   &.no-margin {

ui-ngx/src/app/shared/models/overlay.models.ts

@@ -40,5 +40,5 @@ export const POSITION_MAP: { [key: string]: ConnectionPositionPair } = {
   )
 };
 
-export const DEFAULT_OVERLAY_POSITIONS = [POSITION_MAP.bottomLeft, POSITION_MAP.bottomRight, POSITION_MAP.topLeft,
-  POSITION_MAP.topRight, POSITION_MAP.left, POSITION_MAP.right, POSITION_MAP.bottom];
+export const DEFAULT_OVERLAY_POSITIONS = [POSITION_MAP.bottom, POSITION_MAP.bottomLeft, POSITION_MAP.bottomRight, POSITION_MAP.topLeft,
+  POSITION_MAP.topRight, POSITION_MAP.left, POSITION_MAP.right];