From 2457fdf317660c185ab29dc6c00d6660fb9f0992 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 17 Jun 2022 12:10:40 +0300
Subject: [PATCH] UI: Fixed incorrect show fullscreen dialog in sm
 display(600-959px)

---
 .../script/node-script-test.service.ts        |  2 +-
 .../add-rule-node-dialog.component.html       |  2 +-
 .../add-rule-node-dialog.component.scss       | 26 +++++++++++++++++++
 .../rulechain/rulechain-page.component.ts     |  2 +-
 ui-ngx/src/styles.scss                        |  4 +--
 5 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.scss

diff --git a/ui-ngx/src/app/core/services/script/node-script-test.service.ts b/ui-ngx/src/app/core/services/script/node-script-test.service.ts
index 7428bc40f5..5dcdb192af 100644
--- a/ui-ngx/src/app/core/services/script/node-script-test.service.ts
+++ b/ui-ngx/src/app/core/services/script/node-script-test.service.ts
@@ -85,7 +85,7 @@ export class NodeScriptTestService {
     return this.dialog.open<NodeScriptTestDialogComponent, NodeScriptTestDialogData, string>(NodeScriptTestDialogComponent,
       {
         disableClose: true,
-        panelClass: ['tb-dialog', 'tb-fullscreen-dialog', 'tb-fullscreen-dialog-gt-sm'],
+        panelClass: ['tb-dialog', 'tb-fullscreen-dialog', 'tb-fullscreen-dialog-gt-xs'],
         data: {
           msg,
           metadata,
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
index baea44755c..a8ae57a458 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form (ngSubmit)="add()" style="min-width: 650px;">
+<form (ngSubmit)="add()" class="dialog-container">
   <mat-toolbar color="primary">
     <h2 translate>rulenode.add</h2>
     <span fxFlex>: {{ruleNode.component.name}}</span>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.scss
new file mode 100644
index 0000000000..2057868837
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.scss
@@ -0,0 +1,26 @@
+/**
+ * Copyright © 2016-2022 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import './../scss/constants';
+
+:host {
+  .dialog-container {
+    min-width: 650px !important;
+
+    @media #{$mat-lt-md} {
+      min-width: 100% !important;
+    }
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
index 843616cce0..0640dee39f 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
@@ -1677,7 +1677,7 @@ export interface AddRuleNodeDialogData {
   selector: 'tb-add-rule-node-dialog',
   templateUrl: './add-rule-node-dialog.component.html',
   providers: [{provide: ErrorStateMatcher, useExisting: AddRuleNodeDialogComponent}],
-  styleUrls: []
+  styleUrls: ['./add-rule-node-dialog.component.scss']
 })
 export class AddRuleNodeDialogComponent extends DialogComponent<AddRuleNodeDialogComponent, FcRuleNode>
   implements OnInit, ErrorStateMatcher {
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index b6bf5fdfd2..8c6fffabf1 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -1263,8 +1263,8 @@ mat-label {
     }
   }
 
-  .tb-fullscreen-dialog-gt-sm {
-    @media #{$mat-gt-sm} {
+  .tb-fullscreen-dialog-gt-xs {
+    @media #{$mat-gt-xs} {
       min-height: 100%;
       min-width: 100%;
       max-width: none !important;