From 63da803251412bc249861430b629894c63b36803 Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Wed, 11 Sep 2024 17:39:21 +0300
Subject: [PATCH] Timewindow: fix mobile layout

---
 .../timewindow-config-dialog.component.html   | 52 +++++++++----------
 .../components/time/timewindow-form.scss      |  5 --
 .../time/timewindow-panel.component.html      | 32 ++++++------
 .../time/timewindow-panel.component.scss      |  2 +
 .../components/time/timezone.component.scss   |  2 +-
 .../src/app/shared/models/overlay.models.ts   |  4 +-
 6 files changed, 47 insertions(+), 50 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
index 01a2cdf933..e36996197c 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
+++ b/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>
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-form.scss b/ui-ngx/src/app/shared/components/time/timewindow-form.scss
index ac7cedaec1..0aca6157a6 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-form.scss
+++ b/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,
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
index cc53f62bd6..f47fb90271 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
+++ b/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>
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
index eae99d1e7a..9d9f12a5ce 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
+++ b/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;
diff --git a/ui-ngx/src/app/shared/components/time/timezone.component.scss b/ui-ngx/src/app/shared/components/time/timezone.component.scss
index db4f492985..92f6c7fcc7 100644
--- a/ui-ngx/src/app/shared/components/time/timezone.component.scss
+++ b/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 {
diff --git a/ui-ngx/src/app/shared/models/overlay.models.ts b/ui-ngx/src/app/shared/models/overlay.models.ts
index 46a2f6f5bc..40f871a6ad 100644
--- a/ui-ngx/src/app/shared/models/overlay.models.ts
+++ b/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];