From d051a18e86c636fb5d92ecbc273cd411c3916976 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 9 Feb 2023 19:58:05 +0200
Subject: [PATCH] UI: Mobile screen size improvements

---
 .../app/modules/home/components/router-tabs.component.html   | 2 +-
 ui-ngx/src/app/modules/home/menu/menu-toggle.component.html  | 2 +-
 ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss  | 2 +-
 ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts    | 3 ++-
 .../modules/home/pages/admin/general-settings.component.scss | 5 +++++
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/router-tabs.component.html b/ui-ngx/src/app/modules/home/components/router-tabs.component.html
index ce0054c830..b895428b37 100644
--- a/ui-ngx/src/app/modules/home/components/router-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/components/router-tabs.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column">
+<div fxFlex fxLayout="column" style="width: 100%;">
   <nav mat-tab-nav-bar backgroundColor="primary" class="tb-router-tabs">
     <a *ngFor="let tab of tabs$ | async"
        routerLink="{{tab.path}}"
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
index e84c7ebd69..cb7e3d4b73 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<a mat-button class="tb-button-toggle" (click)="toggleSection()">
+<a mat-button class="tb-button-toggle" (click)="toggleSection($event)">
   <mat-icon *ngIf="!section.isMdiIcon && section.icon !== null" class="tb-mat-18">{{section.icon}}</mat-icon>
   <mat-icon *ngIf="section.isMdiIcon && section.icon !== null" [svgIcon]="section.icon" class="tb-mat-18"></mat-icon>
   <span>{{section.name | translate}}</span>
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
index 47231707d9..e280541889 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
@@ -32,7 +32,7 @@
     z-index: 1;
     overflow: hidden;
 
-    transition: .75s cubic-bezier(.35, 0, .25, 1);
+    transition: .45s cubic-bezier(.35, 0, .25, 1);
 
     transition-property: height;
 
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
index 1d7fb7993b..fdab1ca7a3 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
@@ -46,7 +46,8 @@ export class MenuToggleComponent implements OnInit {
     }
   }
 
-  toggleSection() {
+  toggleSection(event: MouseEvent) {
+    event.stopPropagation();
     this.section.opened = !this.section.opened;
     this.store.dispatch(new ActionPreferencesUpdateOpenedMenuSection({path: this.section.path, opened: this.section.opened}));
   }
diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss
index 66df772d2d..4b2d51d1e9 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss
@@ -14,5 +14,10 @@
  * limitations under the License.
  */
 :host {
+}
 
+:host ::ng-deep {
+  .mat-checkbox-layout {
+    white-space: normal;
+  }
 }