Merge pull request #6737 from vvlladd28/bug/adaptive-fullscren/width

[3.4] UI: Fixed incorrect show rulechain dialog in sm display (600-959px)

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,

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>

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;
+    }
+  }
+}

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts

@@ -1733,7 +1733,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 {

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;