From 50c93521b401cd0033e91a5de0d7e236508d4cdf Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Mon, 8 Jul 2024 14:34:17 +0300
Subject: [PATCH] ui fixes

---
 .../mqtt-basic-config.component.html            | 17 +++++++++++++++++
 .../opc-ua-basic-config.component.html          | 17 +++++++++++++++++
 .../server-config/server-config.component.html  | 10 +++++-----
 .../server-config/server-config.component.scss  | 11 ++++++-----
 .../dialog/mapping-dialog.component.html        |  2 +-
 .../dialog/mapping-dialog.component.scss        |  6 ++++++
 ui-ngx/src/form.scss                            |  3 +++
 7 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt-basic-config/mqtt-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt-basic-config/mqtt-basic-config.component.html
index 8fecdd8618..9849923218 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt-basic-config/mqtt-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt-basic-config/mqtt-basic-config.component.html
@@ -1,3 +1,20 @@
+<!--
+
+    Copyright © 2016-2024 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.
+
+-->
 <mat-tab-group [formGroup]="basicFormGroup">
   <mat-tab label="{{ 'gateway.general' | translate }}">
     <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-ua-basic-config/opc-ua-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-ua-basic-config/opc-ua-basic-config.component.html
index 75c2b76f69..1089fd114c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-ua-basic-config/opc-ua-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-ua-basic-config/opc-ua-basic-config.component.html
@@ -1,3 +1,20 @@
+<!--
+
+    Copyright © 2016-2024 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.
+
+-->
 <mat-tab-group [formGroup]="basicFormGroup">
   <mat-tab label="{{ 'gateway.general' | translate }}">
     <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html
index feff4d0a2d..09ef9aa1ff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html
@@ -18,7 +18,7 @@
 <div class="tb-form-panel no-border no-padding padding-top" [formGroup]="serverConfigFormGroup">
   <div class="server-settings">
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" translate>gateway.server-url</div>
+      <div class="server-conf-field-title fixed-title-width-250" translate>gateway.server-url</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <input matInput name="value" formControlName="url" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -35,7 +35,7 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.opcua-timeout' | translate }}" translate>
+      <div class="server-conf-field-title fixed-title-width-250" tb-hint-tooltip-icon="{{ 'gateway.hints.opcua-timeout' | translate }}" translate>
         gateway.timeout
       </div>
       <div class="tb-flex no-gap">
@@ -55,7 +55,7 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" translate>gateway.security</div>
+      <div class="server-conf-field-title fixed-title-width-250" translate>gateway.security</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="security">
@@ -65,7 +65,7 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.scan-period' | translate }}" translate>
+      <div class="server-conf-field-title fixed-title-width-250" tb-hint-tooltip-icon="{{ 'gateway.hints.scan-period' | translate }}" translate>
         gateway.scan-period
       </div>
       <div class="tb-flex no-gap">
@@ -86,7 +86,7 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.sub-check-period' | translate }}" translate>
+      <div class="server-conf-field-title fixed-title-width-250" tb-hint-tooltip-icon="{{ 'gateway.hints.sub-check-period' | translate }}" translate>
         gateway.sub-check-period
       </div>
       <div class="tb-flex no-gap">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss
index 815e92da90..17ffb27bd8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss
@@ -17,10 +17,11 @@
   width: 100%;
   height: 100%;
   display: block;
+}
 
-  .server-settings {
-    ::ng-deep .fixed-title-width {
-      min-width: 254px !important;
-    }
-  }
+.server-conf-field-title {
+  width: 30%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
index a202c85fcb..35ac90f671 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
@@ -630,7 +630,7 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+              <mat-form-field class="tb-flex no-gap device-node-pattern-field" appearance="outline" subscriptSizing="dynamic">
                 <input matInput name="value" formControlName="deviceNodePattern" placeholder="{{ 'gateway.set' | translate }}"/>
                 <mat-icon matSuffix
                           matTooltipPosition="above"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss
index 147dcd51da..190422eeb0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss
@@ -74,6 +74,12 @@
   }
 
   .device-config {
+    gap: 12px;
     padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .device-node-pattern-field {
+    flex-basis: 3%;
   }
 }
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index c9580bcf74..57e0b96fe5 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -238,6 +238,9 @@
       &-230 {
         min-width: 230px;
       }
+      &-250 {
+        min-width: 250px;
+      }
     }
     [class^="fixed-title-width"] {
       @media #{$mat-xs} {